jQuery显示具有更多和更少链接的第一个X元素

我正在尝试找到一个jQuery解决方案，在左侧导航filter中显示每个菜单上的前3个项目，并显示“显示更多”和“显示更少”链接，以便用户扩展列表。

我已经搜索了一个解决方案，但大多数展开/折叠脚本完整隐藏图层，而其他人显示展开（显示更多）链接但不切换显示折叠（显示更少）链接。

我的菜单编码如下。

 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
  

Answer 1

jsBin演示

这是一个基本的例子：

 $('ul.term-list').each(function(){ var LiN = $(this).find('li').length; if( LiN > 3){ $('li', this).eq(2).nextAll().hide().addClass('toggleable'); $(this).append('
More...
'); } }); $('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(); }); 

或者更紧凑的版本 。

Answer 2

演示： http ： //jsfiddle.net/DQKyT/

 $(function(){ /* add button, hide extra items*/ $('.term-list').each(function() { var $list = $(this); $list.before('More') $list.find('.term-item:gt(2)').hide(); }); /* button click handler*/ $('.more_less').click(function() { var $btn = $(this) $btn.next().find('.term-item:gt(2)').slideToggle(); $btn.text($btn.text() == 'More' ? 'Less' : 'More'); }); })