jQuery商品列表的收缩

最新推荐文章于 2025-07-23 12:36:04 发布

不吵不闹小低调

最新推荐文章于 2025-07-23 12:36:04 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/W1365966490/article/details/8748085

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的显示和隐藏列表项的功能示例。该示例通过点击“显示全部品牌”和“精简品牌”的按钮来控制列表中部分品牌的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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:red;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;
  });

});
</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>