将Megamenu点击事件改为悬停事件的技术实现求助

我懂你的困扰——把触发方式改成悬停后，鼠标刚移到「IT」这类子分类上整个菜单就关闭了，这是因为你之前把hover事件绑定在了.categorie-title单个元素上，一旦鼠标离开这个标题，就会触发关闭逻辑，而子菜单并不属于这个标题的范围。

下面是完美解决这个问题的方案，核心是把悬停触发范围扩大到整个菜单容器，同时处理子菜单的鼠标事件：

步骤1：替换你的JS代码 #

把原来的点击事件代码替换成以下内容：

$(document).ready(function() {
  // 缓存DOM元素，提升性能
  const $verticalMenu = $('.vertical-menu');
  const $menuList = $('.vertical-menu-list');

  // 鼠标进入菜单容器时，展开主菜单
  $verticalMenu.on('mouseenter', function() {
    $menuList.slideDown();
  });

  // 鼠标离开菜单容器时，判断是否移到了子菜单中，再决定是否关闭
  $verticalMenu.on('mouseleave', function(e) {
    // 检查鼠标是否进入了主菜单或它的子元素（比如IT的下拉菜单）
    if (!$menuList.is(e.relatedTarget) && !$menuList.has(e.relatedTarget).length) {
      $menuList.slideUp();
    }
  });

  // 当鼠标离开主菜单区域时，关闭菜单
  $menuList.on('mouseleave', function() {
    $(this).slideUp();
  });
});

步骤2：保留原有CSS（无需额外修改） #

你的现有CSS已经处理了子菜单的显示逻辑（比如li:hover ul.ht-dropdown的样式），所以不需要改动CSS部分，只需要确保.menu-hidden类的display:none保留，这样slideDown()和slideUp()才能正常工作。

为什么这个方案有效？ #

• 我们把悬停事件绑定在了.vertical-menu这个父容器上，而不是单独的标题元素，这样鼠标在标题和主菜单区域内移动时，不会触发关闭。
• 在mouseleave事件中，我们通过e.relatedTarget检查鼠标是否移到了主菜单或它的子菜单里，如果是，就不关闭菜单，避免误操作。
• 最后给主菜单添加mouseleave事件，确保当鼠标完全离开整个菜单区域时，关闭菜单。

这样修改后，你就能实现：鼠标悬停在「All Categories」上显示主菜单，移到子分类（比如IT）时菜单保持打开，鼠标完全离开菜单区域时自动关闭的效果。

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