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

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

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

HTML文件：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <link href="css/2.6.css" rel="stylesheet" media="screen" />

     <title>Brand List</title>

     <script src="js/jquery-3.1.1.min.js"></script>

     <script src="js/2.6.js"></script>

 </head>

 <body>

     <div class="SubCategoryBox">

         <ul>

             <li><a href="#">佳能</a><i>(30440)</i></li>

             <li><a href="#">索尼</a><i>(27220)</i></li>

             <li><a href="#">三星</a><i>(20880)</i></li>

             <li><a href="#">尼康</a><i>(17821)</i></li>

             <li><a href="#">松下</a><i>(12289)</i></li>

             <li><a href="#">卡西欧</a><i>(8242)</i></li>

             <li><a href="#">富士</a><i>(14894)</i></li>

             <li><a href="#">柯达</a><i>(9520)</i></li>

             <li><a href="#">宾得</a><i>(2195)</i></li>

             <li><a href="#">理光</a><i>(4114)</i></li>

             <li><a href="#">奥利巴斯</a><i>(12205)</i></li>

             <li><a href="#">明基</a><i>(1466)</i></li>

             <li><a href="#">爱国君</a><i>(3091)</i></li>

             <li><a href="#">其他品牌相机</a><i>(7275)</i></li>

         </ul>

         <div class="showmore">

             <a href="#"><span>显示全部品牌</span></a>

         </div>

     </div>

 </body>

 </html>

CSS：

 * {

     margin:;

     padding:;

 }

 body {

     font-size: 18px;

     text-align: center;

 }

 a {

     color: #04D;

     text-decoration: none;

 }

 a:hover {

     color: #F50;

     text-decoration: underline;

 }

 .SubCategoryBox{

     width: 600px;

     border: 1px solid black;

     margin: 0 auto;

     margin-top: 30px;

     height: 250px;

 }

 .SubCategoryBox ul{

     list-style-type: none;

 }

 .SubCategoryBox li{

     display: block;

     float: left;

     width: 200px;

     line-height: 30px;

 }

 .showmore{

     clear: both;

     text-align: center;

     padding-top: 15px;

 }

 .showmore a{

     border: 1px solid #AAA;

     width: 120px;

     margin: 0 auto;

     display: block;

     line-height: 24px;

 }

 .promoted a{

     color: #FF5500;

 }

 .promoted i{

     color: #FF5500;

 }

JS：

 /**

  * Created by Administrator on 2017/1/9.

  */

 $(document).ready(function () {

     /*$(".SubCategoryBox ul li:gt(7)").css("display","none");

     $(".SubCategoryBox ul li:last").css("display","block");*/

     var $category = $(".SubCategoryBox ul li:gt(7):not(:last)");

     $category.hide();

     /*$(".showmore").click(function () {

         var $text = $(".showmore a span").text();

         //alert($text);

         if($text == "显示全部品牌"){

             $(".SubCategoryBox ul li").css("display","block");

             $(".SubCategoryBox ul li a:eq(0)").css("color","red");

             $(".SubCategoryBox ul li a:eq(1)").css("color","red");

             $(".SubCategoryBox ul li a:eq(2)").css("color","red");

             $(".showmore a span").text("精简显示品牌");

         }else {

             $(".SubCategoryBox ul li:gt(7)").css("display","none");

             $(".SubCategoryBox ul li:last").css("display","block");

             $(".SubCategoryBox ul li a:eq(0)").css("color","#04D");

             $(".SubCategoryBox ul li a:eq(1)").css("color","#04D");

             $(".SubCategoryBox ul li a:eq(2)").css("color","#04D");

             $(".showmore a span").text("显示全部品牌");

         }

     })*/

     var $toggleBtn = $("div.showmore>a");

     $toggleBtn.click(function () {

         if($category.is(":visible")){

             $category.hide();

             $(this).find("span").text("显示全部品牌");

             $("ul li").removeClass("promoted");     //移除高亮样式

         }else {

             $category.show();

             $(this).find("span").text("精简显示品牌");

             $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥利巴斯')")

                 .addClass("promoted");     //添加高亮样式

         }

         return false;       //超链接不跳转

     })

 })