小菜鸟的JQuery练习项目博客

这周我学习了一些JQuery的代码，并且尝试做了一些简单的特效。
一.标签内容

<div id="menu">
	<div class="top">全部商品详细分类</div>
    <ul class="nav">
        <li><a href="#">尾品汇</a></li>
        <li><a href="#">图书音像数字管</a></li>
        <li><a href="#">美妆个护</a></li>
        <li><a href="#">家具、家纺、家装</a></li>
        <li><a href="#">鞋靴、箱包</a></li>
        <li><a href="#">珠宝装饰</a></li>
        <li><a href="#">手表/眼镜/礼品</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">食品、茶、酒</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑办公</a></li>
        <li class="lastone"></li>
    </ul>
</div>

二.

*{
	margin:0px;
	padding:0px;
	font-size:12px;
}

a{
	color:#000;
	text-decoration:none;
}
#menu{
	margin:30px;
	width:188px;
	background-color:#EFFDFA;
	
}
#menu .top{
	height:40px;
	line-height:40px;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	border:1px solid #93D6C5;
	border-bottom:none;
}
#menu ul.nav{
	list-style:none; 
	
}
#menu ul.nav li{
	display:block;
	height:30px;
	line-height:30px;
	border:1px solid #93D6C5;
	border-top:none;
	 padding-left:30px;
	background:url(images/point.jpg) no-repeat 15px center;
}
#menu ul.nav li.lastone{
	border:none;
	cursor:pointer;
	background:#fff url(images/up.jpg) no-repeat center top;
}
#menu ul.nav li.up{
	background:#fff url(images/down.jpg) no-repeat center top;
}
span.icon{
	float:right;
	margin-right:10px;
	margin-top:10px;
}

三.

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script>
		$(function(){
			$(".lastone").toggle(
					function(){
						$("li").eq(10).hide();
						$("li").eq(9).hide();
						$("li").eq(8).hide();
						$("li").eq(7).hide();
						$(".lastone").css("background-image","url(images/down.jpg)")
					},function(){
						$("li").eq(10).show();
						$("li").eq(9).show();
						$("li").eq(8).show();
						$("li").eq(7).show();
						$(".lastone").css("background-image","url(images/up.jpg)")
					}

			);
		})
	</script>