汉堡菜单点击后不消失求助：需点击菜单项及外部关闭

完整JavaScript代码 #

// 获取汉堡按钮和菜单元素
const burger = document.querySelector('.burger');
const menu = document.getElementById('menu');

// 汉堡按钮点击切换菜单显示/隐藏
burger.addEventListener('click', (e) => {
  // 阻止事件冒泡，避免触发document的点击事件
  e.stopPropagation();
  burger.classList.toggle('active');
  menu.classList.toggle('active');
});

// 点击菜单项关闭菜单
menu.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    burger.classList.remove('active');
    menu.classList.remove('active');
  });
});

// 点击菜单外部区域关闭菜单
document.addEventListener('click', (e) => {
  // 判断点击的元素不是汉堡按钮，也不是菜单的子元素
  if (!burger.contains(e.target) && !menu.contains(e.target)) {
    burger.classList.remove('active');
    menu.classList.remove('active');
  }
});

代码解释 #

• 汉堡按钮切换逻辑：给汉堡按钮绑定点击事件，通过classList.toggle()切换active类，控制菜单的显示/隐藏；同时用e.stopPropagation()阻止事件冒泡，避免刚点击汉堡就触发外部点击关闭的逻辑。
• 菜单项关闭逻辑：遍历所有菜单项的链接，点击时直接移除汉堡和菜单的active类，让菜单收起。
• 外部区域关闭逻辑：给整个文档绑定点击事件，判断点击目标既不是汉堡按钮，也不属于菜单内部元素时，移除active类关闭菜单。

注意事项 #

• 你现有CSS中.burger.active和#menu.active的样式已经满足需求，无需额外修改。
• 菜单项的锚点跳转功能不受影响，只是在点击时额外触发菜单关闭逻辑。

内容的提问来源于stack exchange，提问作者Piotr