移动端汉堡导航菜单点击后不显示问题求助

核心问题 #

你的JS脚本在DOM元素加载完成前就执行了，导致无法找到.hamburger和.nav-menu元素，点击事件根本没绑定成功。因为你把<script src="js/script.js"></script>放在了<head>标签里，这时候浏览器还没解析到<body>里的导航元素，document.querySelector返回的是null，自然无法触发点击逻辑。

修复方案 #

方案1：移动脚本位置到body末尾

把JS脚本标签移到<body>的最后，确保DOM元素全部加载完成后再执行脚本：

<body>
    <header>
      <nav class="navbar">
        <a href="#" class="nav-branding">MYBRAND</a>
        <ul class="nav-menu">
          <li class="nav-item">
            <a href="#" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">About</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
          </li>
        </ul>
        <div class="hamburger">
          <i class="fa-solid fa-bars"></i>
        </div>
      </nav>
    </header>
    <!-- 把脚本放在body末尾 -->
    <script src="js/script.js"></script>
</body>

方案2：用DOMContentLoaded包裹JS代码

如果不想移动脚本位置，就在JS代码外层添加DOMContentLoaded事件监听，确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const hamburger = document.querySelector(".hamburger");
  const navMenu = document.querySelector(".nav-menu");

  hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
  })

  document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
  }))
})

额外检查点 #

• 打开浏览器控制台（按F12）查看是否有报错，比如Cannot read properties of null，这就确认是元素找不到的问题。
• 检查JS文件路径是否正确：如果你的HTML文件在子文件夹中，路径可能需要调整为../js/script.js（根据实际项目结构修改）。

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