移动端下拉菜单active类不生效，JavaScript toggle功能失效求助

问题描述 #

尝试创建屏幕宽度小于650px时触发的下拉菜单，手动修改display: flex能正常显示菜单，但JavaScript切换active类的功能完全无效，.nav-link-wrapper.active始终不生效。

原代码 #

HTML代码 #

<div class="navigation">
  <a href="#" class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="nav-link-wrapper">
    <a href="index.html">Home</a>
  </div>
  <div class="nav-link-wrapper">
    <a href="contact.html">Contact</a>
  </div>
</div>

JavaScript代码 #

const toggleButton = document.getElementsByClassName('hamburger')[0]
const navbarLinks = document.getElementsByClassName('nav-link-wrapper')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

CSS代码 #

@media only screen and (max-width: 650px) {
  .hamburger{
      display: block;
  }

  .navigation{
      display: flex;
      justify-content: space-between;
      padding: 30px;
      border-bottom: 2px solid rgb(185, 22, 22);
      border-top: 2px solid rgb(185, 22, 22);
      font-size: large;
      flex-direction: column;
      align-items: flex-start;
  }

  .nav-link-wrapper{
      display: none;
      width: 100%;
      text-align: center;
      flex-direction: column;
  }

  .nav-link-wrapper.active{  /*NOT GETTING ACTIVE*/
      display: flex;
  }
}

问题根源 #

1. 元素选择不完整：document.getElementsByClassName('nav-link-wrapper')[0]只获取了第一个.nav-link-wrapper元素，点击汉堡按钮时只有第一个菜单项会切换active类，第二个菜单项完全没被操作，所以整体看不到菜单显示效果。
2. CSS逻辑适配问题：原代码针对单个.nav-link-wrapper设置active类，但实际有两个同级的菜单容器，单独控制每个的显示状态会增加冗余。

修复方案 #

方案一：统一容器控制（推荐） #

将所有菜单项放入一个父容器，通过切换父容器的active类来批量控制子菜单显示，更符合语义化和可维护性。

修改后的HTML

<div class="navigation">
  <a href="#" class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <!-- 新增父容器包裹所有菜单项 -->
  <div class="nav-links-container">
    <div class="nav-link-wrapper">
      <a href="index.html">Home</a>
    </div>
    <div class="nav-link-wrapper">
      <a href="contact.html">Contact</a>
    </div>
  </div>
</div>

修改后的JavaScript

const toggleButton = document.getElementsByClassName('hamburger')[0]
// 获取新增的父容器
const navbarLinksContainer = document.getElementsByClassName('nav-links-container')[0]

toggleButton.addEventListener('click', () => {
  // 切换父容器的active类
  navbarLinksContainer.classList.toggle('active')
})

修改后的CSS

@media only screen and (max-width: 650px) {
  .hamburger{
      display: block;
  }

  .navigation{
      display: flex;
      justify-content: space-between;
      padding: 30px;
      border-bottom: 2px solid rgb(185, 22, 22);
      border-top: 2px solid rgb(185, 22, 22);
      font-size: large;
      flex-direction: column;
      align-items: flex-start;
  }

  /* 默认隐藏所有子菜单 */
  .nav-links-container .nav-link-wrapper{
      display: none;
      width: 100%;
      text-align: center;
      flex-direction: column;
  }

  /* 父容器激活时显示所有子菜单 */
  .nav-links-container.active .nav-link-wrapper{
      display: flex;
  }
}

方案二：遍历所有菜单项（不修改HTML） #

如果不想调整HTML结构，可遍历所有.nav-link-wrapper元素，逐个切换active类。

修改后的JavaScript

const toggleButton = document.getElementsByClassName('hamburger')[0]
// 获取所有菜单容器
const navbarLinks = document.getElementsByClassName('nav-link-wrapper')

toggleButton.addEventListener('click', () => {
  // 将HTMLCollection转为数组，遍历切换每个元素的active类
  Array.from(navbarLinks).forEach(link => {
    link.classList.toggle('active')
  })
})

CSS无需修改，保持原代码即可。

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