移动端菜单点击菜单项关闭的JavaScript实现求助

先明确典型的移动端菜单结构（可对应自己的DOM调整） #

以下是通用的HTML结构，你可以对照自己的页面修改类名和ID：

<!-- 汉堡触发按钮 -->
<button id="mobile-menu-toggle">☰</button>
<!-- 移动端菜单容器 -->
<nav id="mobile-menu" class="mobile-menu hidden">
  <ul>
    <li><a href="#home" class="menu-item">首页</a></li>
    <li><a href="#about" class="menu-item">关于我们</a></li>
    <li><a href="#services" class="menu-item">服务</a></li>
    <li><a href="#contact" class="menu-item">联系我们</a></li>
  </ul>
</nav>

配套CSS（控制菜单显示/隐藏） #

用类控制菜单可见性，比直接操作DOM样式更易维护：

/* 默认隐藏菜单 */
.mobile-menu.hidden {
  display: none;
}
/* 菜单显示状态 */
.mobile-menu.active {
  display: block;
}
/* 汉堡按钮样式（可根据你的设计调整） */
#mobile-menu-toggle {
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
}

JavaScript核心代码（带逐行解释） #

// 1. 获取页面关键元素
const menuToggleBtn = document.getElementById('mobile-menu-toggle');
const mobileMenuBox = document.getElementById('mobile-menu');
const allMenuItems = document.querySelectorAll('.menu-item');

// 2. 汉堡按钮基础切换逻辑：点击显示/隐藏菜单
menuToggleBtn.addEventListener('click', () => {
  // toggle方法自动添加/移除指定类，实现状态切换
  mobileMenuBox.classList.toggle('hidden');
  mobileMenuBox.classList.toggle('active');
});

// 3. 菜单项点击折叠菜单的逻辑
allMenuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 判断菜单当前是否处于显示状态（无hidden类）
    if (!mobileMenuBox.classList.contains('hidden')) {
      // 切换回隐藏状态
      mobileMenuBox.classList.add('hidden');
      mobileMenuBox.classList.remove('active');
    }
  });
});

关键注意事项 #

• 如果你的菜单用其他隐藏方式（比如transform: translateX(-100%)、opacity: 0），只需修改CSS里的hidden类样式，JS逻辑完全不用变——核心是通过类切换控制菜单状态。
• 必须确保页面元素的ID、类名和代码里的一致，比如你的菜单项类名不是menu-item，就把querySelectorAll('.menu-item')改成实际类名。
• 如果菜单项是跳转到其他页面的链接，点击后页面刷新菜单自然消失；但如果是单页锚点跳转，这个逻辑必不可少。

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