如何用单个函数高效管理多个按钮的点击交互-js教程

本文介绍如何通过事件委托和参数化函数，避免为每个按钮重复编写相似的 javascript 代码，实现对任意数量菜单按钮的统一控制，同时正确切换 css 类与 `aria-expanded` 属性。

在构建响应式导航菜单时，常需为多个下拉按钮（如 20 个子菜单）分别绑定展开/收起逻辑。若为每个按钮单独编写 ID 对应的函数（如 myFunction1, myFunction2…），不仅代码冗余、难以维护，还违背了 DRY（Don’t Repeat Yourself）原则。

更优解是复用单一函数，并让该函数接收被点击的元素作为参数。只需将 onclick 的调用方式稍作调整：

☰ Products
☰ Contact

对应 JavaScript 函数可精简为：

function toggleMenu(el) {
  const isExpanded = el.getAttribute('aria-expanded') === 'true';
  el.classList.toggle('close');
  el.setAttribute('aria-expanded', !isExpanded);
}

✅ 优势说明：