通过事件委托和参数化函数，只需一个通用 javascript 函数即可统一管理任意数量的折叠按钮，避免重复编写 20 套相似逻辑，同时正确维护 `aria-expanded` 和 css 类状态。

在构建响应式导航菜单时，常需为多个子菜单按钮（如 20 个）分别实现「点击切换展开/收起」功能——包括切换 .close 类、同步更新 aria-expanded 属性。若为每个按钮单独写 myFunction1()、myFunction2()……不仅代码冗余、难以维护，还违背 DRY（Don’t Repeat Yourself）原则。

更优解是：复用单一函数，并通过传参精准操作当前点击元素。关键在于将 this（即被点击的按钮 DOM 元素）作为参数传入函数：

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

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

对应 JavaScript 函数简洁清晰：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

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

✅ 优势说明：

• 零 ID 依赖：无需为每个按钮设置唯一 ID，改用语义化类名（如 menu-toggle）；
• 类型安全：getAttribute() 返回字符串，直接与 'true' 比较更可靠（避免 null 或 undefined 引发错误）；
• 布尔语义准确：aria-expanded 的合法值是字符串 "true" / "false"，但逻辑判断可简化为 === 'true'，赋值时仍保持字符串格式；
• 可扩展性强：后续如需联动控制对应 <ul> 的显示/隐藏，只需 el.nextElementSibling.classList.toggle('show') 即可。

⚠️ 注意事项：

• 避免在 HTML 中大量使用内联 onclick——推荐进阶方案：用 document.addEventListener('click', ...) 结合事件委托（监听父容器），进一步解耦结构与行为；
• aria-expanded 必须与实际视觉状态严格同步，否则会破坏屏幕阅读器体验；
• 切勿省略 aria-label 或 aria-controls（若关联明确区域），以保障无障碍访问完整性。

综上，从 20 份重复函数压缩为 1 个通用函数，不仅是代码量的减少，更是可维护性、可访问性与专业性的提升。