jquery选择器（内容部分显示点击全部显示）

最新推荐文章于 2026-04-06 02:15:49 发布

原创最新推荐文章于 2026-04-06 02:15:49 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#web前端开发 #web开发 #jquery

网页制作专栏收录该内容

27 篇文章

订阅专栏

这篇博客展示了如何使用jQuery实现列表内容的分页显示。通过CSS定义样式，创建了一个包含多个链接的列表，并利用jQuery隐藏超出显示数量的列表项。点击"显示更多"按钮，可以切换显示全部或隐藏多余列表项，实现简洁的分页交互体验。

<style>

.listbox li{ float:left; width:100px; height:30px; line-height:30px; font-size:12px; text-align:center; list-style:none;}
.listbox li a{ font-size:12px; text-decoration:none; color:#999;}
.show-more{ width:100px; margin:0 auto; height:30px; line-height:30px; border:1px solid #666; background:#CCC; color:#FFF; margin-bottom:10px;}
.show-more a{ font-size:12px; text-align:center; color:#000; display:block; width:100px; height:30px; text-decoration:none;}

</style>

<div class="listbox" style=" width:300px; height: auto; border:1px solid #CCC;">

<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<li><a href="#">佳能</a><i>1545</i></li>
<div style="height:0px; width:100%; clear:both; _zoom:1;"></div>
<div class="show-more">
<a href=""><span>显示更多</span></a>
</div>
</div>
<script>
$(function(){
var $list= $(".listbox li:gt(5)")
$list.hide();
var $showmore=$("div .show-more>a");
$showmore.click(function(){

if($list.is(":visible")){
$list.hide();
$(".show-more a span").text("显示跟多")
}else{
$list.show();
$(".show-more a span").text("显示精简")

}
return false;
})
})

</script>