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

Posted 2023-03-24

【中文标题】jQuery 显示带有更多和更少链接的第一个 X 元素

【英文标题】：jQuery show first X elements with More and Less links

【发布时间】：2012-06-19 20:20:18

【问题描述】：

我正在尝试找到一个 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>

【问题讨论】：

How can I display first n elements, then expand to show remaining elements? 的可能重复项

【参考方案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。

【讨论】：

哈哈，我正要发表评论，对您的代码进行更改，以启用更少的文本并向后滑动，但看到了编辑。哦，好吧，无论如何：jsbin.com/oyepoz

【参考方案2】：

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

$(function()
    /* add button, hide extra items*/      
    $('.term-list').each(function() 
        var $list = $(this);
        $list.before('<button class="more_less">More</button>')
       $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');   
    );
)

【讨论】：

如何在列表之后而不是之前使用 more_less 按钮？