如何避免点击下拉子菜单时关闭主下拉菜单？

嘿，这个问题我太熟了——本质是事件冒泡在搞鬼！你给父元素.dropdownItem绑定了点击事件，当你点击子菜单里的<a>标签时，事件会顺着DOM树往上冒泡，最终触发父元素的点击事件，导致current类被切换，子菜单也就跟着关闭了。

下面给你两种简单的解决方案：

方法一：在父元素点击事件中过滤点击目标 #

直接修改你的JS代码，判断点击的内容是不是子菜单区域，如果是就不执行切换类的操作：

$(".navPrimary .dropdownItem").click(function(e) {
  // 检查点击目标是否属于子菜单区域
  if (!$(e.target).closest('.subMenu').length) {
    // 只在点击父菜单本身时，才切换current类
    $(".navPrimary .dropdownItem").not($(this)).removeClass("current");
    $(this).toggleClass("current");
    return false;
  }
});

逻辑说明： #

• $(e.target).closest('.subMenu')会查找点击元素最近的.subMenu祖先节点
• 如果返回的长度为0，说明点击的是父菜单的标题（.imi/actualitat这些链接），才执行菜单切换逻辑
• 如果点击的是子菜单里的内容，就跳过切换操作，菜单自然不会关闭

方法二：阻止子菜单链接的事件冒泡 #

给子菜单里的所有<a>标签绑定点击事件，阻止事件向上冒泡到父元素：

// 给子菜单链接添加阻止冒泡的逻辑
$(".subMenu__content-list a").click(function(e) {
  e.stopPropagation();
});

逻辑说明： #

• e.stopPropagation()会终止事件的冒泡过程，这样点击子菜单链接时，事件不会传递到父元素.dropdownItem
• 父元素的点击事件不会被触发，current类也就不会被误切换

两种方法都能解决你的问题，我更推荐第一种——它不需要额外绑定大量子元素的事件，代码更简洁高效。

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