通过事件委托和参数化函数，只需一个通用 javascript 函数即可统一管理任意数量的折叠按钮，避免重复编写 20 套相似逻辑，同时正确维护 `aria-expanded` 和 css 类状态。
在构建响应式导航菜单时，常需为多个子菜单按钮（如 20 个）分别实现「点击切换展开/收起」功能——包括切换 .close 类、同步更新 aria-expanded 属性。若为每个按钮单独写 myFunction1()、myFunction2()……不仅代码冗余、难以维护，还违背 DRY（Don’t Repeat Yourself）原则。
更优解是：复用单一函数，并通过传参精准操作当前点击元素。关键在于将 this（即被点击的按钮 DOM 元素）作为参数传入函数：
对应 JavaScript 函数简洁清晰：
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'，赋值时仍保持字符串格式；
-
可扩展性强：后续如需联动控制对应
- 的显示/隐藏，只需 el.nextElementSibling.classList.toggle('show') 即可。
⚠️ 注意事项：
- 避免在 HTML 中大量使用内联 onclick——推荐进阶方案：用 document.addEventListener('click', ...) 结合事件委托（监听父容器），进一步解耦结构与行为；
- aria-expanded 必须与实际视觉状态严格同步，否则会破坏屏幕阅读器体验；
- 切勿省略 aria-label 或 aria-controls（若关联明确区域），以保障无障碍访问完整性。
综上，从 20 份重复函数压缩为 1 个通用函数，不仅是代码量的减少，更是可维护性、可访问性与专业性的提升。
