汉堡菜单（全屏导航）用UL做容器时仅首个链接可关闭菜单的问题

数据老陈

2026-5-7

问题分析与解决方案

嗨，这个问题我太熟悉啦！你遇到的核心问题是**querySelector只会选中第一个匹配的元素**，所以只有第一个<a>标签绑定了关闭菜单的点击事件，其他链接自然没反应～

问题根源

你原来的JS代码里：

document.querySelector(".menu__content a").onclick = function() { 
  document.querySelector(".menu").style.height = "0%"; 
}

document.querySelector()方法只会返回页面中第一个符合选择器.menu__content a的元素，所以只有第一个导航链接能触发关闭菜单的逻辑，剩下的链接根本没绑定这个事件。

两种可行的解决方案

方案1：遍历所有链接绑定事件

用querySelectorAll()获取所有匹配的导航链接，然后逐个绑定点击事件：

// 获取菜单下的所有锚点链接
const allMenuLinks = document.querySelectorAll(".menu__content a");

// 遍历每个链接，绑定关闭菜单的点击事件
allMenuLinks.forEach(link => {
  link.addEventListener("click", () => {
    document.querySelector(".menu").style.height = "0%";
  });
});

这里我用了addEventListener代替onclick，它比直接赋值onclick更灵活，支持绑定多个事件，也不容易被覆盖。

方案2：事件委托（更推荐）

把点击事件绑定到父容器menu__content上，利用事件冒泡机制来判断点击的是不是锚点链接。这种方法更高效，尤其适合菜单项动态生成的场景：

// 获取菜单内容容器
const menuContent = document.querySelector(".menu__content");

// 给父容器绑定点击事件
menuContent.addEventListener("click", (e) => {
  // 检查点击的目标是不是锚点链接（兼容点击到链接内部元素的情况）
  const clickedLink = e.target.closest("a");
  if (clickedLink) {
    document.querySelector(".menu").style.height = "0%";
  }
});

事件委托的优势：