仅父级Li触发Hover事件，排除子元素的实现问题求助

我看你遇到的问题是想让hover事件只在父级li.menu-item上触发，而不是子菜单里的元素，之前的代码因为选择器逻辑不对导致没生效，咱们来一步步解决它：

问题根源分析 #

你之前写的选择器.menu-item:not(.menu-item .sub-menu)逻辑是错的：.menu-item .sub-menu指的是.menu-item下面的.sub-menu子元素，而:not()是用来排除当前元素匹配某个选择器的情况，所以这个写法根本没起到过滤子级.menu-item的作用，反而会把所有.menu-item都选中（包括子菜单里的），这就导致鼠标移到子菜单的li上也会触发事件。

正确解决方案 #

这里有两种靠谱的写法，你可以根据自己的HTML结构选：

方法1：直接选择父级li（推荐） #

利用CSS子选择器>，只绑定#menu-header-menu的直接子元素.menu-item，这样子菜单里的.menu-item不会被选中：

// 鼠标进入父级li时展开子菜单
$('#menu-header-menu').on("mouseenter", "> .menu-item", function() {
  $(this).find(".sub-menu").slideDown();
})
// 鼠标离开父级li时收起子菜单
.on("mouseleave", "> .menu-item", function() {
  $(this).find(".sub-menu").slideUp();
});

这里我把slideToggle换成了slideDown和slideUp，避免多次快速hover导致动画异常，体验更流畅。

方法2：排除子菜单内的.menu-item #

如果你的父级li和子菜单li都是.menu-item类，可以用:not()排除掉.sub-menu里面的.menu-item：

$('#menu-header-menu').on("mouseenter", ".menu-item:not(.sub-menu .menu-item)", function() {
  $(this).find(".sub-menu").slideDown();
})
.on("mouseleave", ".menu-item:not(.sub-menu .menu-item)", function() {
  $(this).find(".sub-menu").slideUp();
});

为什么这两种写法有效？ #

• 方法1的>子选择器确保只有最外层的父级li会被绑定事件，子菜单里的li因为不是直接子元素，完全不会被选中；
• 方法2通过:not(.sub-menu .menu-item)明确排除了所有在子菜单容器里的li，只保留顶级的父级li。

这样修改后，就只有当鼠标悬停在父级li本身（而不是子菜单的任何元素）时，才会触发子菜单的展开/收起啦。

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