如何实现三级嵌套菜单点击时的逐层独立开关功能？

现有三级嵌套结构菜单，使用jQuery实现逐层展开，但存在以下问题：

• 一级菜单展开正常
• 点击二级菜单时，一级菜单会自动关闭
• 再次点击一级菜单，二级菜单仍处于展开状态

问题原因 #

事件冒泡机制导致。点击二级菜单的li.menu-item-has-children时，事件会向上冒泡到父级的一级li.menu-item-has-children，触发其slideToggle方法，进而导致一级菜单关闭。

解决方案1：阻止事件冒泡 #

修改JS代码，在点击事件中添加event.stopPropagation()，阻止事件向上传递到父元素：

$(".menu-item-has-children").click(function(event) {
  event.preventDefault();
  // 阻止事件冒泡到父级元素
  event.stopPropagation();
  $(this).children(".sub-menu").slideToggle();
});

解决方案2：绑定事件到菜单<a>标签（更推荐） #

将点击事件绑定从li.menu-item-has-children改为其内部的<a>标签，既符合用户点击文字展开菜单的交互习惯，也从根源避免事件冒泡问题：

$(".menu-item-has-children > a").click(function(event) {
  event.preventDefault();
  // 找到当前链接对应的子菜单并切换显示状态
  $(this).next(".sub-menu").slideToggle();
});

对应的HTML结构保持不变（确保子菜单sub-menu是<a>标签的下一个兄弟元素）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item-has-children">
  <a>About</a>
  <ul class="sub-menu">
    <li>
      <a>Subitem1</a>
    </li>
    <li class="menu-item-has-children">
      <a>Subitem2</a>
      <ul class="sub-menu">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li>
      <a>Subitem3</a>
    </li>
  </ul>
</li>

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