求助：实现导航下拉菜单逐个悬停式开闭的JavaScript代码

嘿，我明白你的问题了——用setTimeout实现了下拉菜单逐个显示，但切换时前一个不会自动关闭，对吧？这其实是因为你没在处理下一个菜单前，先清理掉当前的悬停状态。下面给你一套完整的解决方案，直接就能用：

核心思路 #

每次切换到下一个导航项前，先关闭所有已打开的下拉菜单，再触发当前项的悬停效果；等指定时间后，关闭当前下拉，再处理下一个。这样就能完美模拟依次悬停的效果了。

代码实现 #

1. 基础版（循环往复） #

假设你的导航项类是.nav-item，下拉菜单是其内部的.dropdown（如果类名和目标网站不一样，替换成对应类名即可）：

// 获取所有导航项
const navItems = document.querySelectorAll('.nav-item');

// 关闭所有下拉菜单的辅助函数
function closeAllDropdowns() {
  navItems.forEach(item => {
    // 触发鼠标离开事件，还原原网站的hover逻辑
    item.dispatchEvent(new Event('mouseleave'));
  });
}

// 递归实现循环悬停
function cycleNavItems(currentIndex = 0) {
  // 先关闭所有已打开的下拉
  closeAllDropdowns();
  
  // 获取当前导航项，触发鼠标进入事件
  const currentItem = navItems[currentIndex];
  currentItem.dispatchEvent(new Event('mouseenter'));
  
  // 2秒后切换到下一个（时间可自行调整）
  setTimeout(() => {
    // 计算下一个索引，循环往复
    const nextIndex = (currentIndex + 1) % navItems.length;
    cycleNavItems(nextIndex);
  }, 2000);
}

// 启动模拟
cycleNavItems();

2. 进阶版（仅执行一次，最后自动关闭） #

如果不需要循环，只想从第一个到最后一个走一遍：

const navItems = document.querySelectorAll('.nav-item');

function closeAllDropdowns() {
  navItems.forEach(item => item.dispatchEvent(new Event('mouseleave')));
}

function cycleOnce() {
  navItems.forEach((item, index) => {
    setTimeout(() => {
      closeAllDropdowns();
      item.dispatchEvent(new Event('mouseenter'));
      
      // 最后一个菜单显示2秒后关闭
      if (index === navItems.length - 1) {
        setTimeout(closeAllDropdowns, 2000);
      }
    }, index * 2000); // 每个菜单间隔2秒触发
  });
}

// 启动单次循环
cycleOnce();

关键细节说明 #

• 为什么用dispatchEvent而不是直接操作类？
  这样能完全复用原网站的CSS hover逻辑（比如过渡动画、样式变化），比手动加/删类更贴近真实的用户悬停行为。
• 如何停止循环？
  给循环版加一个开关变量即可：

  let isRunning = true;
  
  function cycleNavItems(currentIndex = 0) {
    if (!isRunning) return; // 开关关闭时停止递归
    
    closeAllDropdowns();
    const currentItem = navItems[currentIndex];
    currentItem.dispatchEvent(new Event('mouseenter'));
    
    setTimeout(() => {
      const nextIndex = (currentIndex + 1) % navItems.length;
      cycleNavItems(nextIndex);
    }, 2000);
  }
  
  // 停止时调用：isRunning = false;
  

• 调整延迟时间
  把代码里的2000（毫秒）改成你想要的时长，比如1500就是1.5秒。

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