MegaMenu JS问题：多菜单项hover均触发首个<li>下拉内容

问题分析 #

当前导航菜单hover非Home菜单项时，均触发Home的下拉内容，核心原因是原JS代码误用了on('hover')事件（jQuery中hover等价于同时绑定mouseenter和mouseleave），导致事件逻辑混乱；同时未确保菜单项与对应下拉内容的关联逻辑精准匹配。

修复步骤及代码修改 #

1. 修正菜单项hover事件绑定 #

将原代码中绑定hover事件改为仅绑定mouseenter事件，确保只有鼠标进入菜单项时才切换对应下拉内容：

// 替换原mega menu部分的hover事件
$('#mega-menu-fresher li').on('mouseenter', function(){
    // 移除所有兄弟元素子项的active类
    $(this).siblings().children().removeClass('active-mega-menu');
    // 给当前菜单项的子项添加active类
    $(this).children().addClass('active-mega-menu');
});

2. 确保HTML结构关联正确 #

每个菜单项（<li class="vegies">）内部需包含对应的下拉内容容器，示例结构如下：

<div id="mega-menu-fresher">
  <ul>
    <li class="vegies">
      <a href="#">Home</a>
      <div class="mega-menu-content">Home专属下拉内容</div>
    </li>
    <li class="vegies">
      <a href="#">Page1</a>
      <div class="mega-menu-content">Page1专属下拉内容</div>
    </li>
    <li class="vegies">
      <a href="#">Page2</a>
      <div class="mega-menu-content">Page2专属下拉内容</div>
    </li>
  </ul>
</div>

3. 调整CSS显示逻辑 #

确保下拉内容仅在对应菜单项的子元素拥有active-mega-menu类时显示，示例CSS：

.mega-menu-content {
  display: none;
}
/* 当菜单项的a标签有active类时，显示其兄弟的下拉容器 */
.vegies a.active-mega-menu + .mega-menu-content {
  display: block;
}

完整修正后的JS代码 #

$(document).ready(function(){
/*mega menu*/
$('#mega-menu-fresher li').on('mouseenter', function(){
    $(this).siblings().children().removeClass('active-mega-menu');
    $(this).children().addClass('active-mega-menu');
});

$('#mega-menu-fresher').on('mouseleave', function(){
    $('#mega-menu-fresher li').children().removeClass('active-mega-menu');
    $('#mega-menu-fresher li:first-child').children().addClass('active-mega-menu');
});

// 修正主菜单的hover事件，分开处理显示/隐藏
$('.navigation-bar ul.menu-list li#mega-menu-parent')
    .on('mouseenter', function(){
        $('#mega-menu-fresher').show();
    })
    .on('mouseleave', function(){
        $('#mega-menu-fresher').hide();
    });

$('#mega-menu-fresher ul li.vegies').on('mouseenter', function(){
    $(this).children('a.active-mega-menu').css('color','#fff');
});
$('#mega-menu-fresher ul li.vegies').on('mouseleave', function(){
    $(this).children('a.active-mega-menu').css('color','#000');
});

});

关键说明 #

• 原代码中on('hover')会同时触发mouseenter和mouseleave，导致切换逻辑混乱，改为mouseenter后仅在鼠标进入时切换下拉内容。
• 主菜单的toggle()改为分开绑定mouseenter显示、mouseleave隐藏，避免菜单显示状态异常。
• 确保HTML结构中每个菜单项与下拉内容一一嵌套，配合CSS选择器实现精准显示。

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