使用 jQuery 切换可见列表项

【问题标题】：Toggle visible list items with jQuery使用 jQuery 切换可见列表项
【发布时间】：2012-01-25 09:05:58
【问题描述】：

我的页面上有多个无序列表。在每个列表中，默认情况下我只想显示前五个列表项，然后有一个链接可以打开和关闭其余项目的显示。

我从这个开始：

$("ul li").slice(5).hide();

但这最终会隐藏所有列表中的所有项目，除了第一个列表中的前五个，因为它们都被一起计算。

我怎样才能做到这一点，但它会单独影响每个列表（请注意，我不能为每个列表添加唯一的 ID）？

【问题讨论】：

【解决方案1】：

您需要使用each 函数为您拥有的每个<ul> 执行此操作。试试这样的：

$("ul").each(function(){
  $(this).children().slice(5).hide();
});

然后使用类似这样的代码来显示它们：

$("#btn").click(function(){
   $("ul").each(function(){
      $(this).children().show();
   });
});

希望这会有所帮助:)

【讨论】：

【解决方案2】：

您可以迭代每个ul 元素，然后隐藏li 元素

$("ul").each(function() {
    $(this).find('li:gt(5)').hide();
});

【讨论】：