用户单击商品列表下的“显示全部品牌”按钮来显示全部的品牌全，同时将推荐的品牌名字高亮显示，按钮里的文字也变成“精简商品品牌”；再次点击“精简商品按钮”，又回到最初的页面

 

1  2  3  4 
      5  6 18 19 20     
     
      21         
      
       22             
       
药膏
23             
       
牙膏
24             
       
牙刷
25             
       
铅笔
26             
       
橡皮
27             
       
香皂
28             
       
水杯
29             
       
钢笔
30             
       
鼠标
31             
       
键盘
32             
       
毛巾
33             
       
台灯
34             
       
爽肤水
35             
       
防晒霜
36             
       
隔离霜
37             
       
手表
38         
      
39         
      
       显示全部品牌
      
40     
     
41 42 43 44 45 50 51 

 

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 }();