在 Vanilla JS 中单击父级时仅打开一个子菜单答案

【问题标题】：Open only one submenu when clicked on the parent in Vanilla JS在 Vanilla JS 中单击父级时仅打开一个子菜单
【发布时间】：2021-08-09 04:26:00
【问题描述】：

我正在尝试构建带有子菜单的菜单。我使用 forEach 循环遍历菜单项，并在其中使用 for 循环显示该特定菜单的子菜单。但是，当我单击父菜单时，所有子菜单都会出现（下面的示例 1）

我对 Javascript 还很陌生。有没有办法来解决这个问题？或者是更好的方法？

谢谢！

Example 1

这里是JS代码：

const menuLink = document.querySelectorAll(".nav-link-mobile");

const subMenu = document.querySelectorAll(".mobile-submenu");

menuLink.forEach(function (element) {
  element.addEventListener("click", () => {
    for (let i = 0; i < subMenu.length; i++) {
      subMenu[i].classList.toggle("mobile-submenu-visible");
      console.log(subMenu.length);
    }
  });
});

【问题讨论】：

标签： javascript for-loop foreach menu submenu

【解决方案1】：

如果没有您的 HTML 或可复制的示例，很难说。

但是尝试添加索引。

menuLink.forEach(function (element, index) {
  element[index].addEventListener("click", () => {
    for (let i = 0; i < subMenu.length; i++) {
      subMenu[i].classList.toggle("mobile-submenu-visible");
      console.log(subMenu.length);
    }
  });

如果不是这样，我将需要您的代码中的更多内容。

【讨论】：

【解决方案2】：

您在menuLink 上有一个click 事件，当单击该事件时（调用） 会循环遍历每个subMenu 项目。您想将click 事件直接放在subMenu 上。我会做类似的事情：

let sub;
for(let m of menuLink){ 
  sub = m.querySelectorAll('.mobile-submenu');
  for(let s of sub){
    s.onclick = function(){ 
      this.classList.toggle('mobile-submenu-visible');
    }
  }
}

【讨论】：

我试过这个，但我得到这个错误“Uncaught TypeError: m.querySelectorAll is not a function”
应该可以。鉴于const menuLink = document.querySelectorAll('.nav-link-mobile'); 是一个nodeList，m 将是该节点的每个子节点。然后我们将一个 nodeList 分配给sub。只要m 是一个节点，那就是一个函数。