移动端导航菜单点击后不展开，往往并非逻辑或样式问题，而是因 DOM 元素选择器拼写错误导致脚本根本未绑定事件——本文将快速定位并修复 document.querySelector 中 ID 名称误写（如 #mobile=menu 错写为 #mobile-menu）这一高频陷阱。
移动端导航菜单点击后不展开，往往并非逻辑或样式问题，而是因 dom 元素选择器拼写错误导致脚本根本未绑定事件——本文将快速定位并修复 `document.queryselector` 中 id 名称误写（如 `#mobile=menu` 错写为 `#mobile-menu`）这一高频陷阱。
在构建响应式网页时，移动端折叠菜单（Hamburger Menu）是标准交互组件。但即使 HTML 结构清晰、CSS 动画与状态类定义完整，若 JavaScript 无法正确获取目标元素，整个交互链就会彻底失效——而这类问题通常
静默失败
：控制台无报错，点击无反应，开发者极易陷入样式或逻辑排查的误区。
核心问题就藏在你的 app.js 第一行：
而你的 HTML 中实际定义的是：
document.querySelector("#mobile=menu") 返回 null，后续对 null.addEventListener(...) 的调用会直接被忽略（不抛错），导致点击事件从未注册，菜单自然无法切换状态。
立即学习
“
Java免费学习笔记（深入）
”；
✅ 正确写法应为：
?
调试建议
：在 JS 文件开头添加验证语句，可快速暴露此类问题：
此外，还需注意以下关键细节以确保功能健壮：
DOM 加载时机
：确保脚本在 HTML 解析完成后再执行。你已将 放在
const menu = document.querySelector("#mobile=menu"); // ❌ 错误：使用了等号 "=" 而非连字符 "-"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");
});console.assert(menu, '❌ #mobile-menu 元素未找到，请检查 HTML ID 拼写');
console.assert(menuLinks, '❌ .navbar__menu 元素未找到，请检查 CSS 类名');