原生 JavaScript：如何展开特定顶级列表，同时收起嵌套列表

展开顶级列表，折叠嵌套列表：原生 JavaScript 指南

在编写复杂的网页时，有时我们需要仅展开选定的列表项，同时保持其他项关闭。这在创建导航菜单或内容丰富的网站时非常有用。

问题

假设我们有一个嵌套列表，每个顶级列表项都有自己的一组嵌套项。我们需要一种方法来展开所选的顶级列表项的嵌套列表，同时隐藏所有其他嵌套列表。

解决方案

使用原生 JavaScript，我们可以实现这一点，具体步骤如下：

1. 获取顶级列表元素

首先，我们需要获取所有顶级列表元素，即带有特定类的 li 元素。

const parentElements = document.querySelectorAll(".toto");

2. 为顶级列表元素添加事件监听器

接下来，我们需要为每个顶级列表元素添加一个事件监听器，以便在点击时触发。

parentElements.forEach(function (parent) {
  parent.addEventListener("click", function (e) {

3. 隐藏所有其他顶级列表的嵌套列表

在点击事件处理程序中，我们需要隐藏所有其他顶级列表的嵌套列表。

parentElements.forEach(function (parent) {
  if (parent !== clickedParent) {
    const nestedList = parent.querySelector(".nested");
    nestedList.classList.remove("active");
  }
});

4. 展开/收起选定的嵌套列表

最后，我们需要展开或收起选定顶级列表的嵌套列表。

const nestedList = clickedParent.querySelector(".nested");
nestedList.classList.toggle("active");

代码片段

将所有代码片段组合在一起，我们得到以下完整解决方案：

const parentElements = document.querySelectorAll(".toto");

parentElements.forEach(function (parent) {
  parent.addEventListener("click", function (e) {
    const clickedParent = e.target.closest(".toto");

    parentElements.forEach(function (parent) {
      if (parent !== clickedParent) {
        const nestedList = parent.querySelector(".nested");
        nestedList.classList.remove("active");
      }
    });

    const nestedList = clickedParent.querySelector(".nested");
    nestedList.classList.toggle("active");
  });
});

结论

通过使用原生 JavaScript，我们可以轻松地展开选定的顶级列表，同时保持嵌套列表关闭。这在创建用户友好且高效的网站时非常有用。

常见问题解答

1. 如何使用不同的类名来展开不同的嵌套列表？

只需更改 toto 类名以匹配您自己的类名即可。

2. 如何在展开嵌套列表时添加动画？

可以使用 CSS 过渡或动画属性来添加动画。

3. 如何使用 jQuery 实现此功能？

可以使用 jQuery 的 show() 和 hide() 方法来实现此功能。

4. 如何在移动设备上支持此功能？

可以使用 JavaScript ontouchstart 事件来支持触摸设备。

5. 如何关闭所有嵌套列表并只展开一个特定的嵌套列表？

只需添加以下代码：

parentElements.forEach(function (parent) {
  const nestedList = parent.querySelector(".nested");
  nestedList.classList.remove("active");
});