JavaScript下拉菜单无法在触发span的mouseleave事件时关闭

你的核心问题在于：当鼠标从触发下拉的<span>所在的#drop元素移到下拉菜单#nav-dropdown时，直接给#drop加mouseleave会立刻关闭菜单，但我们需要让菜单在鼠标还在菜单区域时保持打开；而只给ul加mouseleave又会导致鼠标离开#drop但没碰菜单时，菜单一直开着。

下面给你两种实用的解决方案，优先推荐纯CSS方案，更简洁稳定：

方案1：纯CSS实现（推荐） #

用CSS的:hover就能完美控制下拉菜单的显示隐藏，不需要JS处理核心的显示逻辑，避免鼠标事件冲突：

修改CSS代码 #

/* 当鼠标悬停在触发元素上时，显示子菜单 */
#drop:hover #nav-dropdown {
  display: block;
}

/* 调整菜单位置，消除触发元素和菜单之间的空隙，避免意外关闭 */
#nav-dropdown {
  display: none;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
  top: 100%; /* 让菜单刚好贴在触发元素下方 */
  left: 0;
}

/* 悬停触发元素时的圆角样式 */
#drop:hover {
  border-radius: 7px 7px 0 0;
}

简化JS代码（只保留样式细节处理） #

// 获取元素
const header = document.getElementById('drop');
const ul = document.getElementById('nav-dropdown');
const links = document.getElementsByClassName('dropdown-link');

// 设置下拉菜单最小宽度
const width = header.getBoundingClientRect().width;
ul.style.minWidth = `${width}px`;

// 给最后一个下拉链接加圆角
links[links.length - 1].style.borderRadius = "0 0 7px 7px";

// 处理第一个链接的特殊圆角（如果宽度超过触发元素）
header.addEventListener("mouseover", () => {
  if (links[0].getBoundingClientRect().width > width) {
    links[0].style.borderRadius = "0 7px 0 0";
  }
});

header.addEventListener("mouseleave", () => {
  links[0].style.borderRadius = ""; // 离开时恢复默认样式
});

优化HTML结构（规范嵌套） #

注意ul不能直接嵌套在ul里，要把下拉菜单放到触发元素的<li>内部：

<div class="header-links-container">
  <h2 class="title">Title</h2>
  <div class="header-links">
    <ul class="nav-links">
      <li class="nav-link"><a href="#">Photo Gallery</a></li>
      <li class="nav-link"><a href="#">SLAP</a></li>
      <li id="drop" class="nav-link">
        <span>Dropdown</span>
        <!-- 下拉菜单作为当前li的子元素 -->
        <ul id="nav-dropdown" class="jim">
          <li class="dropdown-link"><a href="#">Link 1</a></li>
          <li class="dropdown-link"><a href="#">Link 2</a></li>
          <li class="dropdown-link"><a href="#">Longer Link</a></li>
          <li class="dropdown-link"><a href="#">Vacuum</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

方案2：改进JS逻辑（如果必须用JS控制） #

如果一定要用JS处理显示隐藏，可以通过延迟定时器解决鼠标从触发元素移到菜单时的冲突：

const header = document.getElementById('drop');
const ul = document.getElementById('nav-dropdown');
const links = document.getElementsByClassName('dropdown-link');
const width = header.getBoundingClientRect().width;
let closeTimer; // 用于存储关闭定时器

// 设置基础样式
ul.style.minWidth = `${width}px`;
links[links.length - 1].style.borderRadius = "0 0 7px 7px";

// 打开菜单的函数
function openMenu() {
  clearTimeout(closeTimer); // 清除之前的关闭定时器
  ul.style.display = "block";
  header.style.borderRadius = "7px 7px 0 0";
  if (links[0].getBoundingClientRect().width > width) {
    links[0].style.borderRadius = "0 7px 0 0";
  }
}

// 关闭菜单的函数（延迟200ms，给鼠标移到菜单的时间）
function closeMenu() {
  closeTimer = setTimeout(() => {
    ul.style.display = "none";
    header.style.borderRadius = "7px";
    links[0].style.borderRadius = "";
  }, 200);
}

// 绑定事件
header.addEventListener("mouseenter", openMenu);
header.addEventListener("mouseleave", closeMenu);
ul.addEventListener("mouseenter", openMenu); // 鼠标进入菜单时取消关闭
ul.addEventListener("mouseleave", closeMenu);

原理是：当鼠标离开触发元素时，不是立刻关闭菜单，而是等待200ms；如果这200ms内鼠标进入了下拉菜单，就清除定时器，菜单保持打开；如果鼠标没进入菜单，再执行关闭操作。

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