解决移动端菜单点击无响应的常见 JavaScript 选择器错误-html教程-PHP中文网

移动端导航菜单点击后不展开，往往并非逻辑或样式问题，而是因 DOM 元素选择器拼写错误导致脚本根本未绑定事件——本文将快速定位并修复 document.querySelector 中 ID 名称误写（如 #mobile=menu 错写为 #mobile-menu）这一高频陷阱。

移动端导航菜单点击后不展开，往往并非逻辑或样式问题，而是因 dom 元素选择器拼写错误导致脚本根本未绑定事件——本文将快速定位并修复 `document.queryselector` 中 id 名称误写（如 `#mobile=menu` 错写为 `#mobile-menu`）这一高频陷阱。

在构建响应式网页时，移动端折叠菜单（Hamburger Menu）是标准交互组件。但即使 HTML 结构清晰、CSS 动画与状态类定义完整，若 JavaScript 无法正确获取目标元素，整个交互链就会彻底失效——而这类问题通常静默失败：控制台无报错，点击无反应，开发者极易陷入样式或逻辑排查的误区。

核心问题就藏在你的 app.js 第一行：

const menu = document.querySelector("#mobile=menu"); // ❌ 错误：使用了等号 "=" 而非连字符 "-"

而你的 HTML 中实际定义的是：

<div class="navbar__toggle" id="mobile-menu"> <!-- ✅ 正确 ID -->
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

document.querySelector("#mobile=menu") 返回 null，后续对 null.addEventListener(...) 的调用会直接被忽略（不抛错），导致点击事件从未注册，菜单自然无法切换状态。

✅ 正确写法应为：

const menu = document.querySelector("#mobile-menu"); // ✅ 修正 ID 选择器
const menuLinks = document.querySelector(".navbar__menu");

menu.addEventListener("click", function () {
  menu.classList.toggle("is-active");
  menuLinks.classList.toggle("active");
});

? 调试建议：在 JS 文件开头添加验证语句，可快速暴露此类问题：
console.assert(menu, '❌ #mobile-menu 元素未找到，请检查 HTML ID 拼写');
console.assert(menuLinks, '❌ .navbar__menu 元素未找到，请检查 CSS 类名');

此外，还需注意以下关键细节以确保功能健壮：