汉堡菜单点击菜单项跳转后仅首个可关闭问题求助

你现在的代码里用document.querySelector(".nav_item")只能选中页面中第一个带有nav_item类的元素，所以只有第一个菜单项绑定了关闭事件，其余菜单项没有绑定点击事件，自然点击无反应。

修复后的JavaScript代码 #

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
// 改为获取所有带nav_item类的元素
const navItems = document.querySelectorAll(".nav_item")

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
  navMargin.classList.toggle("active");
}

// 遍历所有菜单项，逐个绑定关闭事件
navItems.forEach(item => {
  item.addEventListener("click", closeham);
})

function closeham() {
  // 改用remove而非toggle，避免误触发菜单打开，同时同步移除navMargin的激活状态
  navMenu.classList.remove("active");
  hamburger.classList.remove("active");
  navMargin.classList.remove("active");
}

补充说明 #

你的HTML中li和内部的a标签都添加了nav_item类，上述代码会给所有匹配元素都绑定关闭事件，不影响正常使用。如果希望只给可点击的链接绑定事件，将选择器改为document.querySelectorAll(".nav_item a")即可。

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