自行车品牌展示效果-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanghuimin_123/article/details/8748594

<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:150px;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>
   </ul>
   <div class="showMore"><a href="#"><span>显示全部品牌</span></a></div>
   </div>
</body>
</html>

jquery显示列表