如何使用Jquery截断长的无序列表？

我正在使用wordpress显示类别列表，按字母顺序排序。我想使用jQuery在前20个链接之后附加一个“readmore”链接。当用户单击“阅读更多”时，其余类别将向下/显示。列表的HTML格式如下所示：

<ul id="catA">
    <h2>Categories</h2>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    ...
</ul>

类别






...

---

我想将

添加到20rh类别之后的列表中，并隐藏之后的所有内容。在我尝试编写一些代码之前，您对最好的方法有何想法？

我会使用找到第20个li元素（注意它是零索引的），在它之后添加您的View All链接，然后使用选择和隐藏额外的li元素。您需要将事件处理程序附加到显示隐藏li并删除其自身的“查看所有”链接。

我会这样做：

$('ul#catA').children('li').each(function (i)
{
    if (i > 19)
    {
        $(this).hide();   
    }
});

var more = $('<li class="cat-item"><a href="">Show More</a></li>');
$('ul#catA').append(more);

more.find('a').on('click', function (){
   $(this).parent().siblings('li').show();

   return false; 
});

---

这是最简单的解决方案，但可能有效：

• 让列表后创建的“查看全部”链接，并给它一个类似“catA viewall”的ID
• 隐藏所有项目
• 只显示前20个
• 单击“全部查看”，我们将显示所有元素

  var $items = $('#catA').children();
  if ( $items.length > 20 ) {
      $items.hide().slice(0, 20).show();
      $('#catA-viewall').click(function () {
          $items.fadeIn(); // or .show()
          $(this).remove();
      });
  } else {
      $('#catA-viewall').remove();
  }
  

---

很棒的方法，有时我希望我能选择两个好答案。谢谢不知道gt选择器的事。谢谢

var $items = $('#catA').children();
if ( $items.length > 20 ) {
    $items.hide().slice(0, 20).show();
    $('#catA-viewall').click(function () {
        $items.fadeIn(); // or .show()
        $(this).remove();
    });
} else {
    $('#catA-viewall').remove();
}