1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>切换显示内容</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body {font-size:12px;text-align:center;} 9 a { color:#04D; text-decoration:none;} 10 a:hover { color:#F50; text-decoration:underline;} 11 .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} 12 .SubCategoryBox ul { list-style:none;} 13 .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} 14 .showmore { clear:both; text-align:center;padding-top:10px;} 15 .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} 16 .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} 17 .promoted a { color:#F50;} 18 </style> 19 <script src="../jquery/jquery-3.1.1.js" type="text/javascript"></script> 20 <!-- 21 :visible:匹配所有的可见元素 22 find(expr|obj|ele)搜索与指定表达式匹配的元素 23 filter(expr|obj|ele|fn):筛选出与指定表达式匹配的元素集合。 24 --> 25 <script type="text/javascript"> 26 $(function(){ // 等待DOM加载完毕. 27 var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条) 28 $category.hide(); // 隐藏上面获取到的jQuery对象。 29 var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮 30 /*$toggleBtn.click( 31 function(){ 32 $category.show(); // 显示$category 33 $(this).find("span") 34 .css("background","url(img/up.gif) no-repeat 0 0") 35 .text("精简显示品牌"); //改变背景图片和文本 36 $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") 37 .addClass("promoted"); //添加高亮样式 38 return false; //超链接不跳转 39 })*/ 40 $toggleBtn.click(function () { 41 if($category.is(":visible")){ 42 $category.hide(); 43 $(this).find('span').css("background","url(img/down.gif)no-repeat 0 0").text("显示全部品牌");//改变背景图片和文本 44 $('ul li').removeClass("promoted");//去掉高亮显示 45 }else{ 46 $category.show(); 47 $(this).find('span').css("background","url(img/up.gif)no-repeat 0 0").text("精简显示品牌"); 48 $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");//添加高亮显示 49 } 50 return false;//超链接不跳转 51 }) 52 }) 53 </script> 54 </head> 55 <body> 56 <div class="SubCategoryBox"> 57 <ul> 58 <li ><a href="#">佳能</a><i>(30440) </i></li> 59 <li ><a href="#">索尼</a><i>(27220) </i></li> 60 <li ><a href="#">三星</a><i>(20808) </i></li> 61 <li ><a href="#">尼康</a><i>(17821) </i></li> 62 <li ><a href="#">松下</a><i>(12289) </i></li> 63 <li ><a href="#">卡西欧</a><i>(8242) </i></li> 64 <li ><a href="#">富士</a><i>(14894) </i></li> 65 <li ><a href="#">柯达</a><i>(9520) </i></li> 66 <li ><a href="#">宾得</a><i>(2195) </i></li> 67 <li ><a href="#">理光</a><i>(4114) </i></li> 68 <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> 69 <li ><a href="#">明基</a><i>(1466) </i></li> 70 <li ><a href="#">爱国者</a><i>(3091) </i></li> 71 <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> 72 </ul> 73 <div class="showmore"> 74 <a href="more.html"><span>显示全部品牌</span></a> 75 </div> 76 </div> 77 </body> 78 </html>