移动端导航菜单点击后不展开，往往并非逻辑或样式问题，而是因 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(...) 的调用会直接被忽略（不抛错），导致点击事件从未注册，菜单自然无法切换状态。
立即学习“Java免费学习笔记（深入）”；
✅ 正确写法应为：
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 类名');
此外，还需注意以下关键细节以确保功能健壮：
- DOM 加载时机：确保脚本在 HTML 解析完成后再执行。你已将 <script src="app.js"></script> 放在 </body> 前，这是最佳实践；若改为 head 中引入，需包裹在 DOMContentLoaded 事件中。
- CSS 状态类匹配：确认 .navbar__menu.active 的样式规则（如 top: 100%、opacity: 1）在媒体查询内正确定义，且无更高优先级样式覆盖。
- 移动端点击区域：#mobile-menu 使用了 position: absolute 和 transform，请确保其 z-index 足够高（当前 CSS 中未显式设置，建议补充 z-index: 100;），避免被其他元素遮挡。
最后，推荐为菜单交互增加简单视觉反馈（如指针样式）提升可用性：
#mobile-menu {
cursor: pointer; /* 明确指示可点击 */
}一个看似微小的字符错误（= vs -），足以让精心设计的交互完全失效。养成“先查选择器，再调逻辑”的调试习惯，并善用 console.assert() 进行前置校验，能极大提升前端开发效率与代码可靠性。
