如何实现鼠标悬停div时dropdown menu保持展开，移开后关闭？

安全阿岳

2026-8-19

下拉菜单修复方案

你的问题出在没有处理鼠标离开按钮但未进入菜单时的自动关闭逻辑，现有代码的显示/隐藏触发逻辑太单一，导致菜单无法自动收起。可以通过定时器实现延迟关闭，同时监听菜单的鼠标事件来保持展开，具体实现如下：

实现思路

给按钮绑定mouseenter事件触发菜单显示，绑定mouseleave事件启动延迟关闭定时器
给菜单绑定mouseenter事件清除延迟定时器（保持菜单展开），绑定mouseleave事件直接关闭菜单
用变量存储定时器ID，用来控制延迟关闭的逻辑

完整代码

HTML结构示例

<button id="dropdown-btn">下拉按钮</button>
<div id="dropdown-menu">
  <a href="#">菜单选项1</a>
  <a href="#">菜单选项2</a>
  <a href="#">菜单选项3</a>
</div>

JavaScript代码

let closeTimer;
const dropdownBtn = document.getElementById("dropdown-btn");
const dropdownMenu = document.getElementById("dropdown-menu");

// 显示菜单并清除可能存在的关闭定时器
function showMenu() {
  clearTimeout(closeTimer);
  dropdownMenu.style.display = "block";
}

// 启动延迟关闭定时器（300ms是给鼠标从按钮移到菜单的过渡缓冲时间）
function startCloseTimer() {
  closeTimer = setTimeout(() => {
    dropdownMenu.style.display = "none";
  }, 300);
}

// 绑定事件
dropdownBtn.addEventListener("mouseenter", showMenu);
dropdownBtn.addEventListener("mouseleave", startCloseTimer);

dropdownMenu.addEventListener("mouseenter", showMenu);
dropdownMenu.addEventListener("mouseleave", () => {
  dropdownMenu.style.display = "none";
});