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

Question

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

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

谢谢！

示例 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);
    }
  });
});

Answer 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);
    }
  });

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

Answer 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');
    }
  }
}