多按钮onclick对应多函数代码冗余，能否简化实现？

完全不用为每个按钮编写重复的函数，下面两种方法可以高效实现所有菜单按钮的切换逻辑：

方法一：通过this传递按钮引用（简单直接） #

修改后的HTML #

给所有菜单按钮的onclick统一调用同一个函数，并传入按钮自身（this）：

<nav aria-label="resp menu">
  <button aria-expanded="false" onclick="toggleMenu(this)"> Menu </button>
  <ul>
    <li><a href="#">Prvá položka</a></li>
    <li><a href="#">Prvá položka</a></li>
    <li><a href="#">Prvá položka</a></li>
  </ul>
</nav>

<!-- 其他20个菜单结构完全一致，按钮的onclick都写toggleMenu(this)即可 -->

通用JavaScript函数 #

只需要写这一个函数，就能处理所有按钮：

function toggleMenu(button) {
  // 切换按钮的CSS类
  button.classList.toggle("close");
  // 切换aria-expanded属性（直接取反当前状态）
  button.ariaExpanded = !button.ariaExpanded;
}

这里用button.ariaExpanded直接操作DOM属性，比getAttribute/setAttribute更简洁，它会自动处理布尔值和字符串的转换。

方法二：事件委托（更优雅，无需在HTML中写onclick） #

修改后的HTML #

给所有菜单按钮加一个统一的类名（比如menu-toggle），去掉onclick属性：

<nav aria-label="resp menu">
  <button class="menu-toggle" aria-expanded="false"> Menu </button>
  <ul>
    <li><a href="#">Prvá položka</a></li>
    <li><a href="#">Prvá položka</a></li>
    <li><a href="#">Prvá položka</a></li>
  </ul>
</nav>

<!-- 其他菜单的按钮都加上menu-toggle类 -->

事件委托JavaScript代码 #

利用事件冒泡特性，只在父元素（这里直接用document，也可以用所有菜单的共同容器）绑定一次点击事件：

document.addEventListener("click", function(e) {
  // 判断点击的目标是否是菜单按钮
  if (e.target.classList.contains("menu-toggle")) {
    const button = e.target;
    // 执行切换逻辑
    button.classList.toggle("close");
    button.ariaExpanded = !button.ariaExpanded;
  }
});

这种方法的好处是HTML结构更干净，后续新增菜单按钮也不用修改JS代码，自动生效。

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