jQuery显示带有更多和更少链接的前X个元素 [英] jQuery show first X elements with More and Less links
本文介绍了jQuery显示带有更多和更少链接的前X个元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试找到一种jQuery解决方案,以在左侧导航过滤器中显示每个菜单的前3个项目,并带有显示更多"和显示更少"链接,以使用户能够扩展列表.
I am trying to find a jQuery solution to show the first 3 items on each menu in a left-hand navigation filter with a 'Show more' and 'Show less' link enabling users to expand the list.
我已经在寻找解决方案,但是大多数展开/折叠脚本会完全隐藏该图层,而其他脚本则显示展开(显示更多)"链接,但不会切换以显示折叠(显示更少)"链接.
I have searched for a solution but most expand/collapse scripts completley hide the layer whilst others show an Expand (Show more) link but do not toggle to show a Collapse (Show less) link.
我的菜单编码如下.
<div id="menu1">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
<div id="menu2">
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
推荐答案
jsBin演示
这只是一个基本示例:
jsBin demo
Here is just a basic example:
$('ul.term-list').each(function(){
var LiN = $(this).find('li').length;
if( LiN > 3){
$('li', this).eq(2).nextAll().hide().addClass('toggleable');
$(this).append('<li class="more">More...</li>');
}
});
$('ul.term-list').on('click','.more', function(){
if( $(this).hasClass('less') ){
$(this).text('More...').removeClass('less');
}else{
$(this).text('Less...').addClass('less');
}
$(this).siblings('li.toggleable').slideToggle();
});
或更 紧凑版本 .
这篇关于jQuery显示带有更多和更少链接的前X个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文