全部与精简切换显示jQuery实例教程
下面是某网站上的一个品牌列表展示效果，用户进入页面时，品牌列表默认是精简显示的（即不完整的品牌列表）效果如下图所示：
用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。单击“显示全部品牌”按钮同时，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了“精简显示品牌”。再次单击“精简显示品牌”按钮，即可回到初始状态。
实现这个示例，代码如下：
<script> $(function() { var $category = $("ul li:gt(4):not(:last)"); //获取索引值大于4的品牌对象（除最后一条） $category.hide(); //隐藏上面获取到的jQuery对象 var $togglebtn = $(".more>a"); //获取“显示全部品牌”按钮 $togglebtn.click(function() { //给按钮添加onclick事件 if ($category.is(":visible")) { //如果元素显示 $category.hide(); //隐藏$category $(".more a span").css("background", "url(img/up_down.png) no-repeat 0 5px").text("显示全部品牌"); //改变背景、文字 $("ul li").removeClass("promoted"); //移除高亮样式 } else { $category.show(); //显示$category $(".more a span").css("background", "url(img/up_down.png) no-repeat 0 -18px").text("精简显示品牌") //改变背景、文字 $("ul li").filter(":contains('佳能'),:contains('三星'),:contains('松下')").addClass("promoted"); //增加高亮显示 } return false; //阻止链接跳转 }) }) </script> …… <div> <ul> <li><a href="#">佳能</a><i>(3048)</i></li> <li><a href="#">索尼</a><i>(204)</i></li> <li><a href="#">三星</a><i>(1040)</i></li> <li><a href="#">尼康</a><i>(390)</i></li> <li><a href="#">松下</a><i>(700)</i></li> <li><a href="#">明基</a><i>(800)</i></li> <li><a href="#">三洋</a><i>(700)</i></li> <li><a href="#">拍得丽</a><i>(800)</i></li> <li><a href="#">尼柯</a><i>(700)</i></li> <li><a href="#">爱国者</a><i>(800)</i></li> <li><a href="#">其它</a><i>(760)</i></li> </ul> <div><a href="a.html"><span>显示全部品牌</span></a></div> </div>
1.从第4条开始隐藏后面的品牌（最后一条“其它”除外）。
var $category = $("ul li:gt(4):not(:last)"); $category.hide(); //隐藏上面获取到的jQuery对象
$(“ul li:gt(4):not(:last)”)的意思是获取ul元素下索引值大于5的li元素的集合元素，然后去掉集合元素中的最后一个元素。
2.当用户单击“显示全部品牌”按钮时，执行一下操作。
首先获取到按钮，代码如下：
var $gogglebtn = $(".more > a"); //获取“显示全部品牌”按钮
然后给按钮添加事件，使用show()方法把隐藏的品牌列表显示出来，代码如下：
$togglebtn.click(function(){ $category.show(); //显示全部品牌 return false; //阻止链接跳转 })
由于给超练级添加onclick 事件，因此需要使用“return flash”语句让浏览器认为用户没有单击该超链接，从而阻止该超链接跳转。
之后，需要将“显示全部品牌”按钮文本切换成“精简显示品牌”，代码如下：
$(".more a span").css("background", "url(img/up_down.png) no-repeat 0 -18px").text("精简显示品牌") //改变背景、文字
这里完成了两部操作，即把按钮的背景图片换成向上的图片，同时也改变了按钮文本内容，将其替换成了“精简显示品牌”。
接下来需高亮推荐品牌，代码如下：
$("ul li").filter(":contains('佳能'),:contains('三星'),:contains('松下')").addClass("promoted"); //增加高亮显示
使用filter()方法筛选出符合要求的品牌，然后为它们添加promoted样式。在这里推荐了3个品牌，即佳能、三星、松下。
3.当用户单击“精简显示品牌”按钮时，将执行以下操作。
由于用户单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上。要将切换两种状态的效果在一个按钮上进行，可以通过判断元素的显示或者隐藏来达到目的，代码结构如下：
if(元素显示){ //元素隐藏 }else{ //元素显示 }
在jQuery中，与show方法相反的是hide()方法，因此可以使用hide()方法将品牌隐藏起来，代码如下：
$(".more a span").css("background", "url(img/up_down.png) no-repeat 0 5px").text("显示全部品牌"); //改变背景、文字
接下来需要去掉所有的品牌高亮显示状态，此时可以使用removeClass()方法来完成，代码如下：
$("ul li").removeClass("promoted"); //去掉高亮样式
它将去掉所有li元素上的”promoted”样式，即去掉了品牌的高亮状态。
文件下载地址：点击下载
