移动端菜单点击关闭功能代码优化咨询：如何简化重复JS代码？

第一步：优化HTML结构（可选但推荐） #

先统一菜单<a>标签的类名，避免每个项使用不同类名，比如统一改为nav-item：

<div class="container">
  <div class="logo">
    <img src="./images/LogoNewTech.png" alt="">
  </div>
  <div class="menu-toggle" id="mobile-menu">
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
  </div>

  <nav>
    <ul class="nav-list">
      <li><a href="#sobre" class="nav-item">Sobre nós</a></li>
      <li><a href="#produtos" class="nav-item">Produtos</a></li>
      <li><a href="#servicos" class="nav-item">Serviços</a></li>
      <li><a href="#contato" class="nav-item">Contato</a></li>
    </ul>
  </nav>
</div>

第二步：简洁的JavaScript实现方案 #

方案1：事件委托（最推荐）

利用事件冒泡特性，给父元素.nav-list绑定一次点击事件，通过判断点击目标实现菜单关闭。这种方式性能更优，且后续新增菜单项无需修改JS代码：

const navList = document.querySelector('.nav-list');

navList.addEventListener('click', (e) => {
  if (e.target.closest('.nav-item')) {
    navList.classList.remove('show-menu');
  }
});

方案2：批量绑定事件（不使用事件委托时可选）

如果不想修改原有HTML类名，可通过querySelectorAll批量选择所有菜单项，再循环绑定事件：

const mobileItems = document.querySelectorAll('.Item, .Item1, .Item2, .Item3');
const navList = document.querySelector('.nav-list');

const closeMenu = () => navList.classList.remove('show-menu');
mobileItems.forEach(item => item.addEventListener('click', closeMenu));

优化优势 #

• 消除重复代码：避免为每个菜单项编写几乎完全相同的事件监听逻辑
• 提升性能：事件委托仅需绑定一次事件，比多事件监听更高效
• 增强扩展性：新增菜单项时，无需额外修改JS代码（事件委托方案）

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