本文介绍如何为响应式导航栏添加“点击导航链接后自动关闭汉堡菜单”的交互逻辑，解决页面内锚点跳转时菜单持续展开的问题。
本文介绍如何为响应式导航栏添加“点击导航链接后自动关闭汉堡菜单”的交互逻辑，解决页面内锚点跳转时菜单持续展开的问题。
在构建移动端友好的响应式导航时，一个常见但易被忽视的体验问题是：当用户点击导航项（尤其是页面内锚点如 #about、#reviews）后，汉堡菜单并未自动收起，导致遮挡内容、影响操作。这并非浏览器默认行为缺失，而是交互逻辑未覆盖该场景——当前仅通过 .hamburger 触发菜单开关，而导航链接本身未绑定关闭动作。
要实现点击任意导航链接（包括外部页面链接与内部锚点）后自动关闭菜单，核心思路是：复用已有的 mobileMenu 切换函数，并将其绑定到所有 .nav-link 元素上。注意，由于 .nav-link 是多个元素，必须使用 querySelectorAll() 获取节点列表，并通过遍历或事件委托方式绑定事件。
以下是推荐的实现方案（采用现代、健壮的写法）：
// 获取关键 DOM 元素
const hamburger = document.querySelector(".hamburger");
const border = document.querySelector(".border");
const contactimage = document.querySelector(".contact-image");
const contactBubble = document.querySelector(".contact-bubble");
// 菜单切换主函数：统一控制显隐状态
function mobileMenu() {
border.classList.toggle("active");
contactimage.classList.toggle("active");
contactBubble.classList.toggle("active");
// 可选：为无障碍优化，同步切换 hamburger 的 active 状态
if (hamburger) hamburger.classList.toggle("active");
}
// 绑定汉堡按钮点击事件
hamburger?.addEventListener("click", mobileMenu);
// ✅ 关键修复：为所有导航链接绑定点击关闭逻辑
document.querySelectorAll(".nav-link").forEach(link => {
link.addEventListener("click", function(e) {
// 若为内部锚点（如 #about），阻止默认滚动行为可选（仅当需自定义平滑滚动时）
// 此处我们仅关注菜单关闭，不干预跳转逻辑
mobileMenu(); // 直接调用关闭（或切换）菜单
});
});⚠️ 注意事项：
- 避免重复绑定：确保上述代码在 DOM 加载完成后执行（如包裹在 DOMContentLoaded 事件中），防止因节点未就绪导致 querySelectorAll 返回空列表；
- 不要使用 addEventListener 直接作用于 NodeList：原答案中 document.querySelectorAll(...).addEventListener(...) 是错误语法（NodeList 无此方法），必须遍历或使用事件委托；
-
兼容性增强（可选）：若导航菜单动态生成（如 SPA 中路由切换后重绘），建议改用事件委托方式绑定到父容器（如 #nav-menu），避免重复监听：
document.getElementById("nav-menu")?.addEventListener("click", e => { if (e.target.classList.contains("nav-link")) { mobileMenu(); } }); - 用户体验优化：对于锚点跳转，可配合 scrollIntoView({ behavior: 'smooth' }) 实现平滑滚动，但需注意在 mobileMenu() 后延迟执行（如 setTimeout(() => { ... }, 300)），以确保菜单动画完成后再滚动。
总结：关闭汉堡菜单的本质是状态同步——无论触发源是汉堡图标还是导航链接，都应调用同一套状态切换逻辑。通过精准选择器 + 合理事件绑定，即可优雅解决该问题，显著提升移动端导航体验的一致性与可用性。
