Node/EJS环境下汉堡导航菜单点击无响应问题求助

核心问题分析 #

你遇到的问题大概率是脚本执行时机过早，导致DOM元素还未加载完成时，JS代码就已经执行，无法获取到toggle-btn和navbar-links元素，自然无法绑定点击事件。另外也需要确认静态资源配置和CSS优先级是否存在隐性问题。

修复步骤 #

1. 调整脚本加载位置（最可能解决问题）

你当前把<script>放在<head>标签里，此时<body>还未渲染，DOM元素不存在。有两种解决方式：

方式一：将脚本移到body末尾
修改HTML，把script标签放在</body>前：

</nav>
<!-- 其他页面内容 -->
<script src="/javascript/menu.js"></script>
</body>

方式二：用DOMContentLoaded包裹JS代码
如果必须保留在head里，修改menu.js：

document.addEventListener('DOMContentLoaded', () => {
  const toggleButton = document.querySelector('.toggle-btn')
  const navbarLinks = document.querySelector('.navbar-links')

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

2. 验证静态资源是否真的加载成功

打开浏览器开发者工具（F12），切换到Network标签，刷新页面，查看menu.js的请求状态：

• 如果状态是200，说明加载正常；
• 如果还是404，检查server.js的配置：确保javascript文件夹在项目根目录，或者修改为绝对路径配置：

// server.js里的配置，确保路径正确
const path = require('path');
app.use("/javascript", express.static(path.join(__dirname, 'javascript')));

3. 检查CSS样式优先级

打开开发者工具的Elements标签，点击汉堡按钮后，查看.navbar-links元素是否添加了active类：

• 如果类已经添加，但样式没生效，检查是否有其他CSS规则覆盖了.navbar-links.active的display:flex，可以临时加更高优先级验证：

.navbar-links.active {
  display: flex !important;
}

（优先排查是否有其他权重更高的选择器，比如div.navbar-links，尽量少用!important）

额外验证步骤 #

点击汉堡按钮时，打开控制台（Console）：

• 如果提示toggleButton is null或Cannot read properties of null，说明元素没获取到，回到步骤1解决；
• 如果没有报错，检查元素的classList是否正确切换了active类。

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