移动端菜单点击无效通常源于 javascript 中 dom 选择器拼写错误（如将 #mobile-menu 误写为 #mobile=menu），导致事件监听器未正确绑定，本文将系统性地诊断并修复该常见问题。
移动端菜单点击无效通常源于 javascript 中 dom 选择器拼写错误（如将 #mobile-menu 误写为 #mobile=menu），导致事件监听器未正确绑定，本文将系统性地诊断并修复该常见问题。
在构建响应式导航栏时，移动端菜单（常称“汉堡菜单”）的展开/收起功能依赖 HTML 结构、CSS 状态控制与 JavaScript 交互三者精准协同。你提供的代码整体逻辑合理：通过点击 .navbar__toggle（即 #mobile-menu）切换其 is-active 类，并同步控制 .navbar__menu 的 active 类以触发展开动画。但实际运行失败，根本原因在于 JavaScript 中 ID 选择器存在致命拼写错误。
请对比以下两行：
❌ 错误写法（原始 app.js）：
const menu = document.querySelector("#mobile=menu"); // ❌ 使用了等号 "=" 而非短横线 "-"✅ 正确写法（已修正）：
const menu = document.querySelector("#mobile-menu"); // ✅ ID 必须严格匹配 HTML 中的 id="mobile-menu"HTML 中定义的是 <div class="navbar__toggle" id="mobile-menu">，因此 JavaScript 必须使用 #mobile-menu 才能成功获取该元素。#mobile=menu 是一个无效的选择器——浏览器无法找到对应节点，menu 变量值为 null，后续调用 menu.addEventListener(...) 将直接抛出 TypeError: Cannot read property 'addEventListener' of null（尽管控制台可能被忽略），导致点击事件完全失效。
完整修正后的 app.js
// ✅ 确保 DOM 加载完成后再执行脚本（推荐）
document.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector("#mobile-menu"); // 修正 ID 拼写
const menuLinks = document.querySelector(".navbar__menu");
// 防御性检查：确保元素存在
if (!menu || !menuLinks) {
console.warn("Mobile menu or menu links not found. Check HTML structure and IDs/classes.");
return;
}
menu.addEventListener("click", function () {
menu.classList.toggle("is-active");
menuLinks.classList.toggle("active");
});
});关键注意事项与增强建议
- DOM 加载时机：将 JS 逻辑包裹在 DOMContentLoaded 事件中，避免因脚本在 HTML 解析完成前执行而导致 querySelector 返回 null。
- 防御性编程：添加 if (!menu || !menuLinks) 检查，便于快速定位元素缺失问题。
- CSS 过渡一致性：你 CSS 中 transition: all 0.5 ease; 缺少单位 s（应为 0.5s），虽部分浏览器可容错，但建议统一写为 transition: all 0.5s ease; 以保证兼容性。
-
无障碍优化（进阶）：为 #mobile-menu 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新，提升屏幕阅读器支持：
menu.setAttribute('aria-expanded', menuLinks.classList.contains('active'));
修复拼写错误后，点击汉堡图标将正确触发类名切换，CSS 的 active 类生效，.navbar__menu 从 top: -1000px 平滑过渡至 top: 100%，同时 opacity 由 0 变为 1，实现预期的下拉动画效果。此案例再次印证：前端调试的第一步，永远是逐字符核对选择器与 HTML 标识符的一致性。
