本文介绍如何通过事件委托和参数化函数，避免为每个按钮重复编写相似的 javascript 代码，实现对任意数量菜单按钮的统一控制，同时正确切换 css 类与 `aria-expanded` 属性。
在构建响应式导航菜单时，常需为多个下拉按钮（如 20 个子菜单）分别绑定展开/收起逻辑。若为每个按钮单独编写 ID 对应的函数（如 myFunction1, myFunction2…），不仅代码冗余、难以维护，还违背了 DRY（Don’t Repeat Yourself）原则。
更优解是复用单一函数，并让该函数接收被点击的元素作为参数。只需将 onclick 的调用方式稍作调整：
对应 JavaScript 函数可精简为：
function toggleMenu(el) {
const isExpanded = el.getAttribute('aria-expanded') === 'true';
el.classList.toggle('close');
el.setAttribute('aria-expanded', !isExpanded);
}✅ 优势说明：
- this 在内联事件中自动指向当前被点击的
- 使用严格相等（=== 'true'）替代字符串比较，避免类型隐式转换风险；
- 直接用布尔取反 !isExpanded 设置新值，语义清晰、无冗余分支；
- 所有按钮共用同一函数，新增菜单项仅需复制 HTML，无需修改 JS。
⚠️ 注意事项：
- 内联 onclick 虽简单，但不利于分离关注点。生产环境推荐使用 事件委托 或 addEventListener：
document.addEventListener('click', function(e) {
if (e.target.matches('[aria-expanded]')) {
const btn = e.target;
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
btn.classList.toggle('close');
btn.setAttribute('aria-expanded', !isExpanded);
}
});这样彻底解耦 HTML 与 JS，支持动态插入按钮，且更符合现代 Web 开发规范。
总结：通过参数化函数或事件委托，可轻松将 20 份重复逻辑压缩为 1 份健壮、可扩展的代码——既提升可维护性，也增强无障碍支持（aria-expanded 始终准确同步）。
