点击导航项时关闭汉堡菜单问题求助

问题：点击指向新页面的导航链接时，移动端菜单会正常关闭；但点击指向当前页面锚点的链接时，菜单保持打开状态并覆盖页面。

原因分析 #

新页面链接会触发页面刷新，菜单的激活状态（active类）会被重置；而锚点链接仅在当前页面内跳转，不会刷新页面，因此菜单的active类不会自动移除，导致菜单持续显示。

解决方案 #

方法1：给每个导航链接绑定点击事件

修改JavaScript代码，添加导航链接的点击监听，触发菜单关闭逻辑：

const hamburger = document.querySelector(".hamburger");
const border = document.querySelector(".border");
const contactimage = document.querySelector(".contact-image");
const contactBubble = document.querySelector(".contact-bubble");
const navLinks = document.querySelectorAll(".nav-link");

// 汉堡按钮点击事件
hamburger.addEventListener("click", mobileMenu);

// 给所有导航链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener("click", closeMobileMenu);
});

// 切换菜单状态
function mobileMenu() {
  border.classList.toggle("active");
  contactimage.classList.toggle("active");
  contactBubble.classList.toggle("active");
  hamburger.classList.toggle("active"); // 同步切换汉堡图标状态
}

// 关闭菜单
function closeMobileMenu() {
  if (border.classList.contains("active")) {
    border.classList.remove("active");
    contactimage.classList.remove("active");
    contactBubble.classList.remove("active");
    hamburger.classList.remove("active");
  }
}

同时移除HTML中多余的onclick属性（原代码中menuOnClick()函数未定义）：

<div class="right-section">
  <div class="border">
    <ul class="nav-menu" id="nav-menu">
      <li class="nav-item">
        <a href="/home.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#about" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#reviews" class="nav-link">Reviews</a>
      </li>
      <li class="nav-item">
        <a href="/faq.html" class="nav-link">FAQ</a>
      </li>
      <li class="nav-item">
        <a href="/contact.html" class="nav-link">Contact</a>
      </li>
    </ul>
  </div>
  <div class="hamburger" id="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

方法2：使用事件委托（更高效）

如果导航项较多或动态生成，推荐用事件委托给父元素绑定一次事件：

const hamburger = document.querySelector(".hamburger");
const border = document.querySelector(".border");
const contactimage = document.querySelector(".contact-image");
const contactBubble = document.querySelector(".contact-bubble");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

// 给菜单父元素绑定点击事件，通过事件目标判断是否点击了链接
navMenu.addEventListener("click", (e) => {
  if (e.target.classList.contains("nav-link")) {
    closeMobileMenu();
  }
});

function mobileMenu() {
  border.classList.toggle("active");
  contactimage.classList.toggle("active");
  contactBubble.classList.toggle("active");
  hamburger.classList.toggle("active");
}

function closeMobileMenu() {
  if (border.classList.contains("active")) {
    border.classList.remove("active");
    contactimage.classList.remove("active");
    contactBubble.classList.remove("active");
    hamburger.classList.remove("active");
  }
}

效果说明 #

两种方法都能确保：无论点击新页面链接还是锚点链接，都会自动关闭移动端菜单，同时同步切换汉堡图标的状态。

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