jquery实现：列表展开与收缩

话不多说，大家请看代码

先看html代码，以照相机为例子：

（别忘了引入jquery文件）

	
		
		
		
        
		
	

	
		

			

				

					佳能(30440)
				

					尼康(30440)
				

					三星(30440)
				

					索尼(30440)
				

					松下(30440)
				

					卡西欧(30440)
				

					富士(30440)
				

					柯达(30440)
				

					宾得(30440)
				

					理光(30440)
				

					奥林巴斯(30440)
				

					明基(30440)
				

					爱国者(30440)
				

					其他品牌相机(30440)

			
			

				显示全部品牌
			
		
	

然后是css代码：

body{
	font-family: "宋体";
}
ul{
	list-style: none;
}
li{
	float: left;
	width: 300px;
}
span{
	background-color:bisque;	
}
.SubCategoryBox{
	width: 1000px;
}
.showmore{
	clear: both;
	padding: 20px 0 0 0;
	width: 800px;
	text-align: center;
}
.promoted{
	color: red;
}

接下来是重点，大家看好：

$(function() {
	var $category = $('ul li:gt(5):not(:last)') //获得索引值大于5的品牌集合对象（除最后一条）

	$category.hide(); //隐藏上面获取到的jque对象
	var $toggleBtn = $('div.showmore>a'); //获取“显示全部品牌”的按钮
	$toggleBtn.click(function() { //给按钮添加onclick事件
		if($category.is(":visible")) { //如果元素显示
			$category.hide(); //隐藏$category
			$(this).find('span')
				.text("显示全部品牌");//改变文本
			$('ul li').removeClass("promoted"); //去掉高亮样式
		} else {
			$category.show(); //显示$category
			$(this).find('span')
				.text("精简显示品牌");//改变文本
			$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
			//添加高亮样式
		}
		return false; //超链接不跳转
	})
})