jQuery 显示带有 More 和 Less 链接的第一个 X 元素

Question

我试图找到一个 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>

Answer 1

jsBin demo

这只是一个基本示例:

$('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();
    
}); 

或者更多 compact version 。