如何实现超级菜单首个菜单项默认激活展示对应子内容

两个逻辑缺失导致初始加载不显示激活子菜单：

• 你当前仅给二级子菜单的首个选项添加了active类，但基于Bootstrap实现的下拉超级菜单，容器默认是display: none隐藏状态，只有鼠标移入触发mouseenter事件时，才会给顶级菜单外层<li>节点添加open类，下拉面板才会切换为可见。页面初始加载没有触发该事件，自然看不到子菜单内容。
• 你现有的二级子菜单（左侧分类切换右侧内容）的交互逻辑绑定在鼠标移入事件上，初始状态无事件触发，就算子节点带了active类，也无法匹配到对应的CSS显示规则。

全程复用现有交互逻辑，不需要大范围重构代码：

1. 给首个顶级超级菜单补默认激活状态 #

在顶级菜单循环外初始化标记变量，识别第一个类型为mega的菜单项，补全Bootstrap下拉组件激活所需的类名与属性：
找到原有顶级菜单输出的代码段：

foreach ($query as $row) { 
  if ($row['cat_type'] == 'mega') {
?>
<li class="dropdown megamenu-fw mega-li-<?php echo $row['catId']; ?>">
  <a href="categories/<?php echo $row['catId']; ?>/<?php echo $row['cat_seo_url']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['catName']; ?><span class="caret"></span></a>
  <ul class="dropdown-menu megamenu-content dropdown-top" role="menu" aria-expanded="true" data-mega-ul="<?php echo $row['catId']; ?>">

替换为以下代码：

$mega_first_flag = 0; // 顶级菜单循环前初始化标记
foreach ($query as $row) { 
  if ($row['cat_type'] == 'mega') {
    $li_extra_class = '';
    $a_expanded_val = 'false';
    $menu_show_style = '';
    // 识别第一个mega菜单，加激活属性
    if($mega_first_flag === 0){
      $li_extra_class = ' open';
      $a_expanded_val = 'true';
      $menu_show_style = 'style="display: block;"';
      $mega_first_flag = 1;
    }
?>
<li class="dropdown megamenu-fw mega-li-<?php echo $row['catId']; ?><?php echo $li_extra_class; ?>">
  <a href="categories/<?php echo $row['catId']; ?>/<?php echo $row['cat_seo_url']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="<?php echo $a_expanded_val; ?>"><?php echo $row['catName']; ?><span class="caret"></span></a>
  <ul class="dropdown-menu megamenu-content dropdown-top" role="menu" aria-expanded="true" data-mega-ul="<?php echo $row['catId']; ?>" <?php echo $menu_show_style; ?>>

2. 加初始化脚本复用现有hover逻辑 #

在页面菜单DOM渲染完成的位置，加一段简短脚本，页面加载完成后自动触发首个激活菜单的鼠标移入事件，你之前写好的子菜单切换、样式适配逻辑会自动执行，不需要单独写主副菜单激活态关联的逻辑。
如果项目已经引入jQuery，直接加这段即可：

$(function(){
  // 触发首个超级菜单的鼠标移入事件，走原有交互逻辑
  $('.megamenu-fw.open').trigger('mouseenter');
  // 修正鼠标移出菜单后的状态，保持首个菜单默认激活展示
  $('.header-nav, .nav').on('mouseleave', '.megamenu-fw', function(){
    $('.megamenu-fw').removeClass('open').find('.dropdown-menu').hide();
    $('.megamenu-fw:first').addClass('open').find('.dropdown-menu').show().trigger('mouseenter');
  })
})

如果没有引入jQuery，用原生JS实现：

document.addEventListener('DOMContentLoaded', function(){
  const firstMega = document.querySelector('.megamenu-fw');
  if(firstMega){
    firstMega.dispatchEvent(new Event('mouseenter'));
    // 鼠标移出后的默认状态修正
    document.querySelectorAll('.megamenu-fw').forEach(item=>{
      item.addEventListener('mouseleave', ()=>{
        document.querySelectorAll('.megamenu-fw').forEach(i=>{
          i.classList.remove('open');
          i.querySelector('.dropdown-menu').style.display = 'none';
        })
        firstMega.classList.add('open');
        firstMega.querySelector('.dropdown-menu').style.display = 'block';
        firstMega.dispatchEvent(new Event('mouseenter'));
      })
    })
  }
})

改完刷新页面可直接达到预期：

• 首个FINANCE主菜单默认带激活样式
• 对应超级菜单面板默认展开，首个二级分类匹配的右侧内容默认显示
• 鼠标移入其他主菜单、切换二级分类的交互和原有逻辑完全一致，无样式或逻辑冲突

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