移动端菜单点击后不展开，通常是因为 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> 放在