移动端菜单点击后不展开，通常是因为 javascript 中选择器 id 拼写错误（如将 #mobile-menu 误写为 #mobile=menu），导致事件监听器未正确绑定，进而无法切换菜单的显示状态。
移动端菜单点击后不展开，通常是因为 javascript 中选择器 id 拼写错误（如将 #mobile-menu 误写为 #mobile=menu），导致事件监听器未正确绑定，进而无法切换菜单的显示状态。
在构建响应式导航栏时，移动端折叠菜单（Hamburger Menu）是常见需求。但即便 HTML 结构和 CSS 动画逻辑看似完整，只要 JavaScript 的 DOM 查询出现细微错误，整个交互就会完全失效——而这类问题往往因肉眼难以察觉而令人困惑。
最典型的错误之一，就是 ID 选择器拼写不一致。观察原始代码：
<div class="navbar__toggle" id="mobile-menu"> <!-- 正确 ID：mobile-menu --> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div>
但在 app.js 中却写成了：
const menu = document.querySelector("#mobile=menu"); // ❌ 错误：使用了等号 "=" 而非短横线 "-"由于 document.querySelector("#mobile=menu") 返回 null，后续对 menu.addEventListener(...) 的调用会直接抛出 TypeError: Cannot read property 'addEventListener' of null（控制台中可能被忽略），导致点击事件从未注册，菜单自然毫无反应。
✅ 正确写法应严格匹配 HTML 中定义的 ID：
const menu = document.querySelector("#mobile-menu"); // ✅ 短横线连接
const menuLinks = document.querySelector(".navbar__menu");
menu.addEventListener("click", function () {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
});此外，为提升健壮性，建议添加空值校验与调试提示：
if (!menu) {
console.error("❌ Failed to find element with ID 'mobile-menu'. Please check your HTML.");
}
if (!menuLinks) {
console.error("❌ Failed to find element with class 'navbar__menu'.");
}
menu?.addEventListener("click", () => {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
});⚠️ 其他常见排查点（辅助验证）：
- 确保 <script src="app.js"></script> 放在
