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

Question

我正在使用 wordpress 显示类别列表，按字母顺序排序。我想使用 jQuery 在前 20 个链接后面附加一个“阅读更多”链接。当用户单击“阅读更多”时，其余类别会向下滑动/显示。列表的 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 类别之后的列表中，并隐藏所有内容在那之后。在我尝试编写一些代码之前，对解决此问题的最佳方法有什么想法吗？

Answer 1

我会使用 :eq() 选择器找到第 20 个 li 元素（注意它是 < em>零索引），在其后添加“查看全部”链接，然后使用 :gt() 选择器 选择并隐藏你多余的 li 元素。您需要将一个事件处理程序附加到“查看全部”链接，以显示隐藏的 li 并自行删除。

Answer 2

我会这样做：

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

这是 jsfiddle 显示我的方法的实际应用。

---

我根据 @nachito 关于使用 :gt()jsfiddle代码>选择器。我还添加了一些评论来解释正在发生的事情。

// creating the new 'Show More' link
var more = $('<li class="cat-item"><a href="">Show More</a></li>');

// hiding all lis after the first two
$('ul#catA').children('li:gt(1)').hide();

// adding the 'Show More' link
$('ul#catA').append(more);

// binding a click event to 'Show More'
more.find('a').on('click', function (){        
   // hiding 'Show More' and showing the rest of the lis in this ul 
   $(this).parent().hide().siblings('li').show();

   // preventing default action and event bubbling
   return false; 
});

Answer 3

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

• 让“查看全部”链接在列表后创建，并为其指定一个 ID，如“#catA-viewall”；
• 隐藏所有项目；
• 只显示前20条；

• 点击“查看全部”后，我们会显示所有元素。

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