如何用jQuery避免下拉菜单中两个选项同时展开的问题？

嘿，这个问题我之前做项目时也碰到过！核心原因是快速反复悬停时，前一个菜单的收起逻辑还没执行完，新的展开逻辑就触发了，导致两个菜单同时显示。给你几个实用的解决思路：

• 先收再展，确保唯一
  每次触发菜单展开前，先把所有已经展开的下拉菜单都隐藏掉，再展开当前目标菜单。这样从根源上避免多个菜单同时显示：

  $('.menu-item').hover(function() {
    // 先隐藏所有下拉菜单
    $('.dropdown-menu').css('display', 'none');
    // 展开当前菜单对应的下拉内容
    $(this).find('.dropdown-menu').css('display', 'block');
  }, function() {
    // 鼠标离开时加个小延迟，防止误操作导致菜单突然消失
    $(this).find('.dropdown-menu').delay(200).fadeOut(100);
  });
  

• 用防抖函数限制事件触发频率
  快速悬停会频繁触发hover事件，防抖函数可以让事件只在用户停止快速操作后才执行，避免短时间内多次触发导致的混乱。你可以自己实现一个防抖函数，或者用现成的工具库：

  // 自定义防抖函数
  function debounce(func, wait) {
    let timeout;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(context, args), wait);
    };
  }
  
  // 封装展开和收起逻辑
  const handleHoverIn = debounce(function() {
    $('.dropdown-menu').css('display', 'none');
    $(this).find('.dropdown-menu').css('display', 'block');
  }, 100);
  
  const handleHoverOut = debounce(function() {
    $(this).find('.dropdown-menu').css('display', 'none');
  }, 100);
  
  // 绑定防抖后的事件
  $('.menu-item').hover(handleHoverIn, handleHoverOut);
  

• 优先用CSS处理基础悬停（如果可行）
  浏览器原生的CSS :hover 处理这种简单的悬停展开逻辑更稳定，不会有JS事件延迟的问题。如果你的需求不需要复杂的JS逻辑，可以试试纯CSS方案：

  .dropdown-menu {
    display: none;
  }
  
  .menu-item:hover .dropdown-menu {
    display: block;
  }
  

另外还要检查一下：有没有重复绑定hover事件？如果代码里多次执行了绑定hover的逻辑，会导致事件重复触发，也可能出现这种问题。可以用 $('.menu-item').off('hover').hover(...) 先解绑再绑定，避免重复触发。

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