jquery精简品牌列表

最新推荐文章于 2013-08-15 17:00:37 发布

zjl2674802

最新推荐文章于 2013-08-15 17:00:37 发布

阅读量680

点赞数

分类专栏：自己

本文链接：https://blog.csdn.net/fly_zjl/article/details/8748210

版权

自己专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<html>
<head>
   <meta charset="utf-8"/>
   <style>
       *{margin:0;padding:0}
       body{font-size:15px;text-align:center}
       .showLess{margin:auto;width:600px}
       .showLess ul li{display:block;float:left;width:200px;line-height:30px}
       .showMore{clear:both;padding-top:15px}
       a{text-decoration:none;}
       a:hover{color:green;text-decoration:underline}
   </style>
   <script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
   <script>
           $(function(){
           var $category = $(".showLess ul li:gt(2):not(:last)");
           $category.hide();
           $(".showMore a span").toggle(function(){
               $category.show();
               $(".showMore a span").text("精简显示品牌");
               return false;
           },function(){
               $category.hide();
               $(".showMore a span").text("显示全部品牌");
               return false;
           });

       })
   </script>
</head>
<body>
   <div class="showLess">
       <ul>
           <li><a href="#">美利达</a></li>
           <li><a href="#">捷安特</a></li>
           <li><a href="#">宝马</a></li>
           <li><a href="#">飞鸽</a></li>
           <li><a href="#">凤凰</a></li>
           <li><a href="#">二八</a></li>
           <li><a href="#">艾玛</a></li>
           <li><a href="#">永久</a></li>
           <li><a href="#">巴赫</a></li>
           <li><a href="#">迈巴赫</a></li>
           <li><a href="#">更多品牌</a></li>
       </ul>
       <div class="showMore"><a href="#"><span>显示全部品牌</span></a></div>
   </div>
</body>
</html>

zjl2674802

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery精简品牌列表

*{margin:0;padding:0} body{font-size:15px;text-align:center} .showLess{margin:auto;width:600px} .showLess ul li{display:block;float:left;width:200px;line-height:30px}
复制链接

扫一扫