如何为子菜单添加移出悬停延迟并修复菜单切换冲突

我完全懂你现在的困扰——想要子菜单移出后延迟1秒再隐藏，提升用户体验，但切换主菜单时旧的子菜单却因为延迟还留在那里，太影响交互了。下面咱们一步步解决这个问题：

第一步：修正HTML结构 #

你提供的HTML里有标签闭合错误，比如<li/>应该是</li>，先把这个修正，否则会影响JS选择器和事件绑定：

<div>
  <ul class="menu_type_top">
    <li><a href="#">Hello</a></li>
    <li>
      <a href="#">hi</a>
      <ul>
        <li><a href="#">Hello</a></li>
        <li><a href="#">hi</a></li>
      </ul>
    </li>
    <li><a href="#">ok</a></li>
  </ul>
</div>

第二步：重写JavaScript逻辑 #

核心思路是用定时器控制延迟隐藏，同时在切换主菜单时立刻清除所有旧定时器并隐藏旧子菜单。咱们来实现这个逻辑：

// 全局存储定时器ID，方便后续清除所有延迟操作
let menuTimer;

// 主菜单项的悬停事件
$('ul.menu_type_top > li').on('mouseover', function(e) {
  // 1. 清除所有之前的延迟定时器，避免旧菜单继续延迟隐藏
  clearTimeout(menuTimer);
  
  // 2. 隐藏所有其他主菜单项的子菜单，切换时立刻收起旧菜单
  $('ul.menu_type_top > li').not(this).find("ul:first").hide();
  
  // 3. 显示当前主菜单项的子菜单
  const ulObj = $(this).find("ul:first");
  ulObj.show();
  
  // 4. 保持你原来的菜单高度调整逻辑
  const menu_height = ulObj[0].clientHeight + 300;
  $('ul.menu_type_top').css({ height: menu_height });
}).on('mouseout', function(e) {
  const $currentSubMenu = $(this).find("ul:first");
  // 设置1秒延迟后隐藏子菜单并恢复默认高度
  menuTimer = setTimeout(() => {
    $currentSubMenu.hide();
    $('ul.menu_type_top').css({ height: 40 });
  }, 1000);
});

// 子菜单项的悬停事件
$('ul.menu_type_top li li').on('mouseover', function(e) {
  // 鼠标在子菜单上时，清除延迟定时器，避免菜单被意外隐藏
  clearTimeout(menuTimer);
  // 显示当前子菜单的嵌套菜单（如果有的话）
  $(this).find('ul:first').show();
}).on('mouseout', function(e) {
  const $currentSubSubMenu = $(this).find('ul:first');
  // 子菜单移出时，1秒延迟隐藏嵌套菜单
  menuTimer = setTimeout(() => {
    $currentSubSubMenu.hide();
  }, 1000);
});

关键逻辑说明 #

• 全局定时器变量：用来统一管理所有延迟隐藏的定时器，不管是主菜单还是子菜单的延迟，都能通过clearTimeout随时取消。
• 主菜单mouseover时的操作：先清除旧定时器，再隐藏其他子菜单，这样切换主菜单时旧菜单会立刻消失，不会因为延迟留在页面上。
• 延迟隐藏的时机：只有当鼠标完全离开主菜单/子菜单时，才会触发1秒延迟隐藏；如果鼠标在延迟期间回到菜单上，定时器会被立刻清除，菜单保持显示。

这样既满足了“移出子菜单延迟1秒隐藏”的需求，又解决了“切换主菜单时旧菜单不立即消失”的问题。

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