嵌套导航点击子菜单触发父菜单关闭的问题如何解决？

问题原因 #

该现象是事件冒泡导致的：DOM结构里子元素和父元素都绑定了同类型点击事件时，点击子元素的事件会逐层向上传递到父元素，触发父元素绑定的点击回调，所以点击子菜单时，父菜单的切换逻辑也会同步执行。

解决方法 #

在现有的点击事件回调里新增event.stopPropagation()，阻止点击事件向上冒泡即可，修改后的代码如下：

jQuery(document).ready(function($) {
  //Toggle sub-menus
  $('#menu .has-children').on('click', function(event) {
    // 阻止事件向上冒泡，避免触发父级菜单的点击事件
    event.stopPropagation();
    event.preventDefault();
    $(this).children('.sub-menu').slideToggle(500);
  });
});

补充说明 #

• 如果你没有用到<a>标签的跳转需求，可以保留event.preventDefault()；如果后续菜单里的链接需要正常跳转，可以根据实际场景判断是否移除该行。
• event.stopPropagation()只会阻止事件向父级元素传递，不会影响当前元素本身绑定的其他事件执行，完全适配多层嵌套子菜单的场景。

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