原生Vanilla JS实现多级导航时二级及更深层级菜单点击失效问题求助

问题根因 #

• 事件冒泡冲突：深层子菜单的点击事件会向上冒泡到父级菜单元素，触发父级的切换逻辑，导致刚展开的子菜单被立即收回，视觉上就像点击没有响应
• 目标元素获取不准确：原代码使用e.target获取触发元素，而事件实际绑定在带有has-submenu类的li元素上，点击内部的a标签时用e.target会出现目标查找错误

修复后的JS代码 #

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();
// 修改：用e.currentTarget直接获取当前绑定事件的.has-submenu元素，定位更准确
let ul = e.currentTarget.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if(cs==="block") {
ul.style.display="none";
}
else {
ul.style.display="block";
}
});
});

说明 #

原有CSS和HTML代码不需要修改，直接替换JS代码即可实现任意层级子菜单的点击展开/收起功能。

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