精简显示列表_精简列表-CSDN博客

本文链接：https://blog.csdn.net/lmw773034423/article/details/8842136

<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 $a=$(".showLess ul li:gt(2):not(last)");
    $a.hide();
    $(".showMore a span").toggle(function(){
       $a.show();
     $(".showMore a span").text("显示更多品牌");
     return false;
    },function(){
          $a.hide();
     $(".showMore a span").text("精简更多品牌");
     return false;
    });

});
*/
$(function(){
   var $a=$(".showLess ul li:gt(2):not(last)");
   $a.hide();
   $(".showMore a span").toggle(function(){
     $a.show();
$(".showMore a span").text("精简品牌");
   },function(){
     $a.hide();
$(".showMore a span").text("显示品牌");
   });

})
</script>
<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>
</ul>
<div class="showMore"><a href="#"><span>显示更多品牌</span></a></div>
</div>
</body>
</html>