移动端下拉导航点击子项父级关闭，如何绑定子链接事件给父li加active类

点击子元素时产生的事件冒泡会沿着DOM树向上传递，触发父级li绑定的点击事件，导致父菜单的active类被切换、菜单意外关闭。

• 取消直接给li绑定点击事件的逻辑，改为给li下的直接子a标签绑定切换事件，避免点击菜单内部任意区域都触发切换
• 点击事件中阻止冒泡，避免子菜单的点击操作影响父级菜单状态
• 直接通过父元素匹配规则拿到当前菜单对应的li节点，切换active类即可，支持无限层级的嵌套子菜单

HTML代码 #

（已修正原代码中把a标签href属性误写为class的问题，同时补充了嵌套子菜单示例验证适配性）

<ul>
<li class="menu-item-has-children nav-level-0">
    <a href="#">一级菜单1</a>
    <ul class="submenu">
        <li class="menu-item-has-children nav-level-1">
            <a href="#">二级菜单1</a>
            <ul class="submenu">
                <li><a href="#">三级菜单1</a></li>
            </ul>
        </li>
    </ul>
</li>
<li class="menu-item-has-children nav-level-0">
    <a href="#">一级菜单2</a>
    <ul class="submenu"></ul>
</li>
</ul>

JavaScript代码 #

// 选中所有带子菜单的li下的直接子a标签作为切换触发器
var navToggles = document.querySelectorAll(".menu-item-has-children > a");

for (var i = 0; i < navToggles.length; i++) {
  navToggles[i].addEventListener("click", function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 阻止事件冒泡，避免触发父级菜单的切换逻辑
    e.stopPropagation();
    // 获取当前触发器对应的父级菜单项li
    var parentMenuItem = this.parentElement;
    // 切换active类控制子菜单显隐
    parentMenuItem.classList.toggle('active');
  });
}

原有CSS逻辑无需调整，只要保证子菜单显隐规则是基于父li的active类控制即可，示例如下：

.submenu {
  display: none;
}
.menu-item-has-children.active > .submenu {
  display: block;
}

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