使用 jQuery 切换可见列表项

Question

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

我从这个开始：

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

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

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

Answer 1

您需要使用 each 函数对您拥有的每个

执行此操作。尝试这样的事情：

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

然后使用这样的代码来显示它们全部：

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

这是一个jsfiddle：
http://jsfiddle.net/F8ByE/

希望这有帮助:)

Answer 2

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

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