我试图找到一个 jQuery 解决方案，在左侧导航过滤器中显示每个菜单上的前 3 个项目，并带有“显示更多”和“显示更少”链接，使用户能够扩展列表。
我已经寻找了一个解决方案，但大多数展开/折叠脚本完全隐藏图层，而其他脚本则显示展开（显示更多）链接，但不切换以显示折叠（显示更少）链接。
我的菜单编码如下。
<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 演示 http://jsbin.com/abusoq/2/edit#javascript,html,live
这只是一个基本示例：
$('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();
});
或者更多紧凑型 http://jsbin.com/dojoku/1/edit?html,js,output.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
