jquery - 如何在列表项jquery中显示第n个类型2的块

Question

我有 ul 项目，上面有很多列表项目，第一个列表是显示的，第二个项目是没有的。当我单击第一个列表时，我需要显示剩余列表引用 jquery

<ul>
   <li>first item</li>
   <li style='display: none'>seconed item</li>
   <li style='display: none'>third item</li>
   <li style='display: none'>fourth item</li>
</ul>

标签： jqueryhtmlcss

Answer 1

你不需要 jQuery。这可以在 vanilla javascript 中完成：

var list = document.getElementById("list");
list.children[0].addEventListener("click", function() {
  for(var i = 1; i < list.children.length; i++) {
    list.children[i].style.display = "list-item";
  }
});

<ul id="list">
  <li>first item</li>
  <li style='display: none'>seconed item</li>
  <li style='display: none'>third item</li>
  <li style='display: none'>fourth item</li>
</ul>

如果您想在单击第一项时隐藏/显示列表项，您可以使用一个hide类：

var list = document.getElementById("list");
list.children[0].addEventListener("click", function() {
  for(var i = 1; i < list.children.length; i++) {
    list.children[i].classList.toggle("hide");
  }
});

.hide {
  display: none;
}

<ul id="list">
  <li>first item</li>
  <li>seconed item</li>
  <li>third item</li>
  <li>fourth item</li>
</ul>