Jquery案例——某网站品牌列表的效果

一下是效果图。点击“显示全部品牌”，高亮推荐品牌，并显示全部品牌。

HTML文件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <link href="css/2.6.css" rel="stylesheet" media="screen" />
 6     <title>Brand List</title>
 7     <script src="js/jquery-3.1.1.min.js"></script>
 8     <script src="js/2.6.js"></script>
 9 </head>
10 <body>
11     <div class="SubCategoryBox">
12         <ul>
13             <li><a href="#">佳能</a><i>(30440)</i></li>
14             <li><a href="#">索尼</a><i>(27220)</i></li>
15             <li><a href="#">三星</a><i>(20880)</i></li>
16             <li><a href="#">尼康</a><i>(17821)</i></li>
17             <li><a href="#">松下</a><i>(12289)</i></li>
18             <li><a href="#">卡西欧</a><i>(8242)</i></li>
19             <li><a href="#">富士</a><i>(14894)</i></li>
20             <li><a href="#">柯达</a><i>(9520)</i></li>
21             <li><a href="#">宾得</a><i>(2195)</i></li>
22             <li><a href="#">理光</a><i>(4114)</i></li>
23             <li><a href="#">奥利巴斯</a><i>(12205)</i></li>
24             <li><a href="#">明基</a><i>(1466)</i></li>
25             <li><a href="#">爱国君</a><i>(3091)</i></li>
26             <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
27         </ul>
28         <div class="showmore">
29             <a href="#"><span>显示全部品牌</span></a>
30         </div>
31     </div>
32 </body>
33 </html>

CSS：

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 body {
 7     font-size: 18px;
 8     text-align: center;
 9 }
10 
11 a {
12     color: #04D;
13     text-decoration: none;
14 }
15 
16 a:hover {
17     color: #F50;
18     text-decoration: underline;
19 }
20 
21 .SubCategoryBox{
22     width: 600px;
23     border: 1px solid black;
24     margin: 0 auto;
25     margin-top: 30px;
26     height: 250px;
27 }
28 
29 .SubCategoryBox ul{
30     list-style-type: none;
31 
32 }
33 .SubCategoryBox li{
34     display: block;
35     float: left;
36     width: 200px;
37     line-height: 30px;
38 
39 }
40 .showmore{
41     clear: both;
42     text-align: center;
43     padding-top: 15px;
44 }
45 
46 .showmore a{
47     border: 1px solid #AAA;
48     width: 120px;
49     margin: 0 auto;
50     display: block;
51     line-height: 24px;
52 }
53 
54 .promoted a{
55     color: #FF5500;
56 }
57 
58 .promoted i{
59     color: #FF5500;
60 }

JS：

 1 /**
 2  * Created by Administrator on 2017/1/9.
 3  */
 4 $(document).ready(function () {
 5 
 6     /*$(".SubCategoryBox ul li:gt(7)").css("display","none");
 7     $(".SubCategoryBox ul li:last").css("display","block");*/
 8 
 9     var $category = $(".SubCategoryBox ul li:gt(7):not(:last)");
10     $category.hide();
11 
12     /*$(".showmore").click(function () {
13         var $text = $(".showmore a span").text();
14         //alert($text);
15         if($text == "显示全部品牌"){
16             $(".SubCategoryBox ul li").css("display","block");
17             $(".SubCategoryBox ul li a:eq(0)").css("color","red");
18             $(".SubCategoryBox ul li a:eq(1)").css("color","red");
19             $(".SubCategoryBox ul li a:eq(2)").css("color","red");
20             $(".showmore a span").text("精简显示品牌");
21         }else {
22             $(".SubCategoryBox ul li:gt(7)").css("display","none");
23             $(".SubCategoryBox ul li:last").css("display","block");
24             $(".SubCategoryBox ul li a:eq(0)").css("color","#04D");
25             $(".SubCategoryBox ul li a:eq(1)").css("color","#04D");
26             $(".SubCategoryBox ul li a:eq(2)").css("color","#04D");
27             $(".showmore a span").text("显示全部品牌");
28         }
29     })*/
30     var $toggleBtn = $("div.showmore>a");
31     $toggleBtn.click(function () {
32         if($category.is(":visible")){
33             $category.hide();
34             $(this).find("span").text("显示全部品牌");
35             $("ul li").removeClass("promoted");     //移除高亮样式
36 
37 
38         }else {
39             $category.show();
40             $(this).find("span").text("精简显示品牌");
41             $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥利巴斯')")
42                 .addClass("promoted");     //添加高亮样式
43         }
44         return false;       //超链接不跳转
45     })
46 
47 })