mouseleave事件实现鼠标离开下拉菜单全元素触发收起功能问题求解

问题根因 #

你的子菜单DOM结构没有嵌套在触发事件的父li元素内部，导致父元素的mouseleave事件在你鼠标移动到子菜单时就会触发，而不是等你离开整个菜单区域再触发。
你当前的结构是同级关系：

<li class="navigation__list-menu-about">
  <a href="/about" class="now">About</a>
</li>
<!-- 子菜单和父li平级，不属于父li的子元素 -->
<ul id="nav" class="navigation__list-menu-about-options now">
  <li><a href="/bio">my bio</a></li>
  <li><a href="/cv">curriculum vitae</a></li>
</ul>

解决方案 #

方法一：调整DOM结构（最推荐，符合语义且无需修改JS） #

将子菜单嵌套进父li内部，此时父li的事件监听范围会包含自身和子菜单，鼠标在两者之间移动不会触发mouseleave，只有完全离开整个父li区域才会触发隐藏逻辑。
修改后的完整代码如下：

<ul class="navigation__list-menu">
  <li class="navigation__list-menu-about">
    <a href="/about" class="now">About</a>
    <!-- 子菜单移入父li内部 -->
    <ul id="nav" class="navigation__list-menu-about-options now">
      <li><a href="/bio">my bio</a></li>
      <li><a href="/cv">curriculum vitae</a></li>
    </ul>
  </li>
</ul>

<script>
const navOptions = document.querySelector(".navigation__list-menu-about");
const navOptionMenu = document.querySelector(
  ".navigation__list-menu-about-options"
);

navOptions.addEventListener("mouseenter", (e) => {
  navOptionMenu.classList.add("active");
});

navOptions.addEventListener("mouseleave", (e) => {
  navOptionMenu.classList.remove("active");
});
</script>

注意：如果你的子菜单用了绝对定位，需要给父元素.navigation__list-menu-about添加position: relative样式，避免子菜单定位偏移。

方法二：不调整DOM结构的兼容方案 #

如果因为历史原因不能修改DOM结构，可以给父元素和子菜单都绑定事件，用计时器延迟判断鼠标是否真的离开了整个菜单区域：

const navOptions = document.querySelector(".navigation__list-menu-about");
const navOptionMenu = document.querySelector(
  ".navigation__list-menu-about-options"
);
let hideTimer = null;

// 统一显示逻辑
const showMenu = () => {
  clearTimeout(hideTimer);
  navOptionMenu.classList.add("active");
};

// 统一隐藏逻辑
const hideMenu = () => {
  hideTimer = setTimeout(() => {
    navOptionMenu.classList.remove("active");
  }, 100); // 100ms延迟，避免鼠标在两个元素之间移动时误触发隐藏
};

// 给父元素和子菜单都绑定事件
navOptions.addEventListener("mouseenter", showMenu);
navOptions.addEventListener("mouseleave", hideMenu);
navOptionMenu.addEventListener("mouseenter", showMenu);
navOptionMenu.addEventListener("mouseleave", hideMenu);

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