标签：
用户单击商品列表下的“显示全部品牌”按钮来显示全部的品牌全，同时将推荐的品牌名字高亮显示，按钮里的文字也变成“精简商品品牌”；再次点击“精简商品按钮”，又回到最初的页面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品列表</title> 6 <style type="text/css"> 7 a{ 8 text-decoration:none; 9 display:block; 10 } 11 ul{ 12 list-style-type:none; 13 } 14 .promoted{ 15 color:#F51414;; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="shop"> 21 <ul class="list"> 22 <li><a href="javascript:;">药膏</a></li> 23 <li><a href="javascript:;">牙膏</a></li> 24 <li><a href="javascript:;">牙刷</a></li> 25 <li><a href="javascript:;">铅笔</a></li> 26 <li><a href="javascript:;">橡皮</a></li> 27 <li><a href="javascript:;">香皂</a></li> 28 <li><a href="javascript:;">水杯</a></li> 29 <li><a href="javascript:;">钢笔</a></li> 30 <li><a href="javascript:;">鼠标</a></li> 31 <li><a href="javascript:;">键盘</a></li> 32 <li><a href="javascript:;">毛巾</a></li> 33 <li><a href="javascript:;">台灯</a></li> 34 <li><a href="javascript:;">爽肤水</a></li> 35 <li><a href="javascript:;">防晒霜</a></li> 36 <li><a href="javascript:;">隔离霜</a></li> 37 <li><a href="javascript:;">手表</a></li> 38 </ul> 39 <div class="showMore"><button>显示全部品牌</button></div> 40 </div> 41 42 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.js"></script> 43 <script src="../Public/assets/plugins/jquery/jquery-1.11.2.min.js"></script> 44 <script src="../Public/assets/global/js/shop.js"></script> 45 <script type="text/javascript"> 46 $(document).ready(function(){ 47 shop.init(); 48 }); 49 </script> 50 </body> 51 </html>
1 var shop = function(){ 2 var initData = function(){ 3 var $category = $("ul li:gt(5)"); 4 $category.hide(); 5 var $toggleBtn = $("div button"); 6 $toggleBtn.bind(‘click‘,function(){ 7 if($category.is(":visible")){ 8 $category.hide(); 9 $("ul li").children().removeClass("promoted"); 10 $(this).text("显示全部品牌"); 11 }else{ 12 $category.show(); 13 $("ul li").filter(":contains(‘牙刷‘),:contains(‘水杯‘),:contains(‘爽肤水‘)").children().addClass("promoted"); 14 $(this).text("精简显示品牌"); 15 } 16 }); 17 18 }; 19 return{ 20 init:function(){ 21 initData(); 22 } 23 } 24 }();
标签：
原文地址：http://www.cnblogs.com/srxhmxx/p/4544228.html
