如何精简JavaScript导航菜单重复代码，用更少行数实现相同功能

数据老陈

2026-10-2

优化方案

你的重复代码来自手动为每个菜单项单独绑定了完全相同的点击逻辑，我们可以通过以下两种方式精简代码：

方案1：循环批量绑定事件（最易理解）

直接遍历所有菜单项统一绑定点击事件，不用逐个写索引绑定：

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");

// 汉堡按钮切换菜单显示状态
navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

// 批量给所有菜单项绑定点击收起菜单逻辑
document.querySelectorAll(".nav-menu-item").forEach(item => {
  item.addEventListener("click", () => {
    // 这里用remove比toggle更合理，点击菜单项必然要收起菜单，避免误触发展开
    navMenu.classList.remove("nav-menu_visible");
  });
});

方案2：事件委托（性能最优，可适配动态新增的菜单项）

不用给每个子元素绑定事件，直接给菜单父容器绑定事件即可，后续如果新增菜单项也不需要重新绑定事件：

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

// 父容器监听点击事件，自动代理所有子菜单项的点击
navMenu.addEventListener("click", (e) => {
  // 校验点击的元素是否属于菜单项内部
  if(e.target.closest('.nav-menu-item')) {
    navMenu.classList.remove("nav-menu_visible");
  }
});