如何点击外部区域关闭移动端Toggle导航菜单？附代码求助

嘿，你的网站外观做得挺不错的！要实现点击菜单外部区域自动关闭导航的需求，我们可以通过监听全局点击事件来判断点击位置，如果不是菜单按钮或导航菜单本身，就关闭菜单。这里是修改后的JavaScript代码，我会给你详细解释：

const burger = document.querySelector(".burger");
const navLinks = document.querySelector(".header-nav-links");
const links = document.querySelectorAll(".header-nav-links li");

// Toggle Nav when clicking burger
burger.addEventListener("click", (e) => {
  // 阻止事件冒泡，避免触发document的click事件
  e.stopPropagation();
  navLinks.classList.toggle("open");
  
  // Animate Links
  links.forEach((link, index) => {
    if (link.style.animation) {
      link.style.animation = ""
    } else {
      link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.2}s`;
    }
  });
});

// 监听document的点击事件，判断是否要关闭菜单
document.addEventListener("click", (e) => {
  // 如果点击的不是burger，也不是navLinks内部的元素，并且菜单是打开状态
  if (!burger.contains(e.target) && !navLinks.contains(e.target) && navLinks.classList.contains("open")) {
    navLinks.classList.remove("open");
    // 清除所有链接的动画，确保下次打开时能重新触发
    links.forEach(link => {
      link.style.animation = "";
    });
  }
});

// 额外优化：点击导航链接后自动关闭菜单
links.forEach(link => {
  link.addEventListener("click", () => {
    navLinks.classList.remove("open");
    links.forEach(l => l.style.animation = "");
  });
});

关键逻辑说明： #

• 阻止事件冒泡：在burger的点击事件里添加e.stopPropagation()，这样点击菜单按钮时不会触发全局的点击事件，避免菜单刚打开就被意外关闭。
• 全局点击判断：通过burger.contains(e.target)和navLinks.contains(e.target)检查点击目标是否在菜单按钮或导航菜单内部，如果都不在且菜单处于打开状态，就移除open类并清除链接动画。
• 点击链接关闭菜单：额外添加了点击导航链接后关闭菜单的逻辑，这是移动端导航的常见体验优化，用户点击链接后菜单自动收起，不用手动再点一次按钮。

你只需要把这段代码替换掉原来的JS部分，测试一下就能看到效果啦！

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