用户单击商品列表下的“显示全部品牌”按钮来显示全部的品牌全，同时将推荐的品牌名字高亮显示，按钮里的文字也变成“精简商品品牌”；再次点击“精简商品按钮”，又回到最初的页面
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 }();
时间： 2024-10-20 05:12:39