为什么JavaScript实现的多级导航子菜单点击功能运行异常

• 未阻止事件冒泡
  你给所有包含子菜单的li（.has-submenu）都绑定了点击事件，但点击子级菜单时，事件会向上冒泡到所有祖先级的.has-submenu元素，依次触发它们的点击回调。你只调用了e.preventDefault()阻止了链接跳转，没有调用e.stopPropagation()阻止冒泡，导致单次点击触发多层菜单的切换逻辑。
• 子菜单选择逻辑错误
  你在回调中使用e.target.parentElement.querySelector("ul")查找要切换的子菜单，但事件冒泡触发父级回调时，e.target仍然是你最初点击的最下层元素，此时查找的ul并非当前绑定事件的父级li的子菜单，逻辑完全错位。正确的做法是使用绑定事件的当前元素来查找自身的子ul。

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
  if (item.parentElement.querySelector("ul")) {
    item.parentElement.classList.add("has-submenu");
  }
});

let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.preventDefault();
    // 阻止事件冒泡到上层菜单
    e.stopPropagation();
    // 从当前绑定事件的li元素下查找子ul
    let ul = item.querySelector("ul");
    let cs = window.getComputedStyle(ul).display;
    if (cs === "none") {
      ul.style.cssText = "display:block";
    } else {
      ul.style.cssText = "display:none";
    }
  });
});

内容的提问来源于stack exchange，提问作者Ren Jitsm