点击“显示全部”展开列表，同时其中三项变色。点击“收起列表”即可收起列表！
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/main.js"></script> <style> .promoted{ color: red; } </style> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">苹果</a><i>(2356) </i></li> <li><a href="">华为</a><i>(2355) </i></li> <li><a href="">小米</a><i>(2354) </i></li> <li><a href="">联想</a><i>(2353) </i></li> <li><a href="">努比亚</a><i>(2352) </i></li> <li><a href="">魅族</a><i>(2351) </i></li> <li><a href="">MOTO</a><i>(2350) </i></li> <li><a href="">360</a><i>(2310) </i></li> <li><a href="">一加</a><i>(2311) </i></li> <li><a href="">中兴</a><i>(2312) </i></li> <li><a href="">朵唯</a><i>(2313) </i></li> <li><a href="">索尼</a><i>(2314) </i></li> <li><a href="">三星</a><i>(2315) </i></li> <li><a href="">松下</a><i>(2316) </i></li> <li><a href="">富士通</a><i>(2317) </i></li> <li><a href="">华硕</a><i>(2318) </i></li> <li><a href="">荣耀</a><i>(2319) </i></li> <li><a href="">其他品牌</a><i>(2320) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示全部</span></a> </div> </div> </body> </html>
js：
/** * Created by wangyu on 2017-05-24. */ //实现显示隐藏部分内容 $(function () { //获取第七个到倒数第二个li，共11个li var $category = $("ul li:gt(5):not(:last)"); //隐藏这11个li $category.hide(); //获取class为showmore的div下面的a标签，也就是 显示全部 var $toggleBtn = $("div.showmore > a"); //给显示全部添加点击事件 $toggleBtn.click(function () { //判断li是否显示，如果显示并隐藏 if ($category.is(":visible")){ $category.hide(); //把span里面的文本替换成显示全部，并移除a标签的class属性 $(this).find("span").text("显示全部"); $("ul li a").removeClass("promoted") }else { //如果隐藏了，就显示li $category.show(); //更改span文本为收起列表 $(this).find("span").text("收起列表"); //获取包含苹果 三星 华为的a标签，并添加class为promoted $("ul li a").filter(":contains(苹果),:contains(三星),:contains(华为)").addClass("promoted"); } //保证 <a href="more.html"><span>显示全部</span></a> 超链接不跳转 return false; }) })