点击主导航切换二级导航显示的JS/CSS实现问题

常见失效原因 #

• JS执行时机不对，DOM还没加载完就跑代码，导致找不到元素
• 元素选择器写错，拿不到对应的导航节点
• 显示/隐藏逻辑没写全，比如没先隐藏其他导航，或者逻辑写反
• 没阻止链接的默认跳转，点击后页面刷新，状态重置

修复方案（附完整代码） #

调整后的HTML结构（确保元素可被正确定位）

<!-- 主导航 -->
<nav class="main-nav">
  <a href="#" class="main-nav-item" data-target="prognosis-nav">Prognosis</a>
  <a href="#" class="main-nav-item" data-target="rooster-nav">Planning</a>
</nav>

<!-- 二级导航 -->
<div class="sub-nav" id="prognosis-nav">
  <ul>
    <li>Prognosis 子项1</li>
    <li>Prognosis 子项2</li>
  </ul>
</div>
<div class="sub-nav" id="rooster-nav" style="display: none;">
  <ul>
    <li>Rooster 子项1</li>
    <li>Rooster 子项2</li>
  </ul>
</div>

修复后的JavaScript代码

// 等页面DOM完全加载好再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 拿到所有主导航按钮和二级导航容器
  const mainNavItems = document.querySelectorAll('.main-nav-item');
  const subNavs = document.querySelectorAll('.sub-nav');

  // 给每个主导航按钮绑定点击事件
  mainNavItems.forEach(item => {
    item.addEventListener('click', function(e) {
      // 阻止链接默认跳转（不然点一下页面会刷新）
      e.preventDefault();
      // 从按钮的data-target属性里拿到要显示的二级导航ID
      const targetSubNavId = this.getAttribute('data-target');

      // 先把所有二级导航都隐藏
      subNavs.forEach(nav => {
        nav.style.display = 'none';
      });

      // 找到目标二级导航并显示
      const targetNav = document.getElementById(targetSubNavId);
      if (targetNav) {
        targetNav.style.display = 'block';
      }
    });
  });
});

核心修复点 #

• 用DOMContentLoaded保证JS在DOM加载完成后执行，避免找不到元素的问题
• 用data-target属性关联主导航和对应二级导航，逻辑更灵活，不用硬写一堆判断
• 点击时先隐藏所有二级导航，再显示目标导航，避免多个导航同时显示
• 加了e.preventDefault()阻止链接跳转，防止页面刷新导致状态丢失

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