如何实现汉堡菜单点击后自动收起及点击外部区域关闭功能

本文详细讲解如何用纯 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 更可靠，因为它能识别点击菜单内部任意元素（如 或
• ），确保用户点击菜单项时菜单不会意外关闭——这正是你提到的“点击菜单位置后应消失”的核心需求。
• 不需要为每个 单独绑定 click 事件；利用事件委托 + contains() 判断即可优雅覆盖所有菜单内点击场景。

⚠️ 注意事项：

• 确保 html 中汉堡按钮（.burger）和菜单（#menu）在 dom 中已加载完成再执行 js（推荐将脚本置于