本文详细讲解如何用纯 javascript 实现汉堡菜单的交互逻辑：点击汉堡图标展开/收起菜单，并在点击菜单项或页面其他区域时自动关闭菜单，避免菜单常驻屏幕。
要让汉堡菜单（Hamburger Menu）真正具备可用性，仅靠 CSS 动画是不够的——必须通过 JavaScript 控制 .active 类的切换与移除。你当前的 CSS 已正确设置了 #menu.active 的位移动画（transform: translateX(0%)），但缺少关键的事件监听逻辑，导致菜单“展开后无法关闭”。
以下是完整、健壮且适合初学者理解的 JavaScript 解决方案：
// 获取 DOM 元素
const burger = document.querySelector(".burger");
const menu = document.querySelector("#menu");
// 1. 点击汉堡图标：切换菜单显隐状态
burger.addEventListener("click", (e) => {
e.stopPropagation(); // 阻止事件冒泡，避免触发后续的 document 点击关闭
menu.classList.toggle("active");
});
// 2. 点击页面任意位置（除汉堡和菜单本身外）：关闭菜单
document.addEventListener("click", (e) => {
// 若点击目标是汉堡图标或菜单容器本身，不执行关闭
if (e.target === burger || menu.contains(e.target)) {
return;
}
// 否则，强制移除 active 类，收起菜单
menu.classList.remove("active");
});✅ 关键说明：
- e.stopPropagation() 在汉堡点击事件中至关重要：它防止点击汉堡后事件继续向上传播到 document，否则会立即触发关闭逻辑，造成“点一下闪一下”的异常行为。
- menu.contains(e.target) 比 e.target === menu 更可靠，因为它能识别点击菜单内部任意元素（如 <a> 或 <li>），确保用户点击菜单项时菜单不会意外关闭——这正是你提到的“点击菜单位置后应消失”的核心需求。
- 不需要为每个 <a> 单独绑定 click 事件；利用事件委托 + contains() 判断即可优雅覆盖所有菜单内点击场景。
⚠️ 注意事项：
- 确保 HTML 中汉堡按钮（.burger）和菜单（#menu）在 DOM 中已加载完成再执行 JS（推荐将脚本置于 </body> 前，或使用 DOMContentLoaded）。
- 若页面存在其他绝对定位/高 z-index 元素，需检查是否遮挡了 document 的点击捕获区域（可通过开发者工具检查事件监听器是否生效）。
- 移动端建议额外添加 touchstart 事件监听（与 click 逻辑一致），以提升触摸响应准确性（现代浏览器通常兼容良好，可选）。
通过以上逻辑，你的汉堡菜单将具备专业级交互体验：点击图标开合自如，点击菜单项平滑跳转并自动收起，点击空白区域即时关闭——简洁、可靠、零依赖。
