jq小demo—品牌列表（点击切换部分或全部）

<div class="SubCategoryBox">
	<ul>
		<li><a href="">佳能</a><i>30400</i></li>
		<li><a href="">索尼</a><i>30400</i></li>
		<li><a href="">三星</a><i>30400</i></li>
		<li><a href="">尼康</a><i>30400</i></li>
		<li><a href="">松下</a><i>30400</i></li>
		<li><a href="">卡西欧</a><i>30400</i></li>
		<li><a href="">富士</a><i>30400</i></li>
		<li><a href="">柯达</a><i>30400</i></li>
		<li><a href="">宾得</a><i>30400</i></li>
		<li><a href="">理光</a><i>30400</i></li>
		<li><a href="">奥林巴斯</a><i>30400</i></li>
		<li><a href="">明基</a><i>30400</i></li>
		<li><a href="">爱国者</a><i>30400</i></li>
		<li><a href="">其他品牌</a><i>30400</i></li>
	</ul>
	<div class="showmore">
		<a href="more.html"><span>显示全部品牌</span></a>
	</div>
</div>

<script type="text/javascript">
	$(function(){                                 //等待DOM加载完毕
		var $category=$("ul li:gt(5):not(:last)");//利用索引值获取相应元素，大于5，不包括最后一条
		$category.hide();                         //执行隐藏操作
		var $togleBtn=$(".showmore>a");            //获取a元素
		$togleBtn.click(function(){               //添加点击事件
			if($category.is(":visible")){
				$category.hide();
				$(this).find("span")
					.css("background","#ddd")
					.text("显示全部品牌");
				$("ul li").removeClass("promoted");
			}else{
				$category.show();                     //显示全部品牌
				$(this).find("span")                 //找到相应元素
					.css("background","#f00")
					.text("显示精简品牌");           //执行操作（使用了链式操作）
				$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
					.addClass("promoted");            //使用filter()方法，匹配推荐品牌，高亮
			}
/*要将切换两种状态的效果在同一个按钮上执行，可以通过判断元素的显示或者隐藏来达到目的*/
			return false; 
			//由于给超链接添加onclick时间，因此需要使用“return false”语句让浏览器认为用户没有单击该超链接，从而阻止该超链接跳转。
		})
	})
/*如果改成toggle()方法，代码如下
$toggleBtn.toggle(function(){
	//显示元素
},function(){
	//隐藏元素
})
当单击按钮后，脚本会对代码的两种情况进行交替处理。
*/
</script>