点击汉堡菜单导航链接后菜单未关闭的技术问题求助

问题核心 #

页面内锚点跳转无页面加载过程，下拉菜单的激活状态无法自动清除，需通过手动绑定事件触发菜单关闭。

解决方案代码 #

假设你的HTML结构如下（请根据实际代码调整选择器）： #

<!-- 汉堡触发按钮 -->
<button class="hamburger-btn" id="hamburgerBtn">☰</button>
<!-- 移动端下拉菜单 -->
<nav class="mobile-nav" id="mobileNav">
  <ul class="menu-list">
    <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>
  </ul>
</nav>

对应的JavaScript代码： #

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取关键DOM元素（请确保选择器与你的代码一致）
  const hamburgerBtn = document.getElementById('hamburgerBtn');
  const mobileNav = document.getElementById('mobileNav');
  const menuItems = document.querySelectorAll('.menu-item');

  // 汉堡按钮切换菜单显示/隐藏
  hamburgerBtn.addEventListener('click', () => {
    mobileNav.classList.toggle('active');
    hamburgerBtn.classList.toggle('active'); // 同步按钮的激活状态（如需要）
  });

  // 给每个菜单锚点链接绑定点击事件，关闭菜单
  menuItems.forEach(item => {
    item.addEventListener('click', () => {
      // 移除菜单的激活类，关闭下拉菜单
      mobileNav.classList.remove('active');
      hamburgerBtn.classList.remove('active'); // 同步按钮状态
    });
  });
});

关键注意事项 #

• 选择器匹配：确保代码中的id、类名与你的HTML/PHP输出的元素完全一致，比如你的菜单可能用.dropdown-menu而非.mobile-nav，需对应修改。
• 执行时机：必须在DOM元素加载完成后执行JS，否则会出现无法获取元素的情况，上述代码用DOMContentLoaded确保这一点。
• 冲突排查：如果仍不生效，检查是否有其他JS代码阻止了点击事件冒泡，可在链接的点击事件中添加event.stopPropagation()尝试解决：

  item.addEventListener('click', (event) => {
    event.stopPropagation();
    mobileNav.classList.remove('active');
    hamburgerBtn.classList.remove('active');
  });
  

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