事件委托在Accordion中通过父容器监听click/keydown事件，利用event.target.matches和closest精准捕获标题点击或键盘操作，统一处理展开/收起、ARIA属性更新及CSS动画，天然支持动态内容与键盘访问。
事件委托在 Accordion 组件中非常实用，能避免为每个标题项重复绑定事件监听器，还能动态支持新增/删除面板，同时让展开收起逻辑更集中、易维护。
用父容器监听点击，识别目标标题
把 click 事件监听器绑定在 Accordion 的最外层容器（比如 <div class="accordion">），利用事件冒泡和 <code>event.target 判断是否点中了某个标题（如 <button class="accordion-header"></button>）。
- 检查
event.target.matches('.accordion-header')确保只响应标题点击 - 用
event.target.nextElementSibling或自定义 data 属性（如data-target="#panel-1"）快速定位对应内容区 - 避免监听
button内部子元素（如图标、文字 span），可用event.target.closest('.accordion-header')更健壮地捕获标题本身
切换状态时统一处理「展开」与「收起」逻辑
每次点击标题，先关闭所有已展开的面板（可选：实现单开模式），再对当前标题对应的内容区做 toggle。
- 给当前标题添加
aria-expanded="true"，其他标题设为"false"，提升可访问性 - 给对应内容区添加/移除
aria-hidden="false/true"和hidden属性 - 配合 CSS 过渡（如
max-height+overflow: hidden）或height: 0 → auto的 JS 动画控制收放效果
支持键盘操作（Enter / Space）增强可用性
仅靠鼠标点击不够，还需监听 keydown 事件，对聚焦的标题响应空格键和回车键。
立即学习“Java免费学习笔记（深入）”；
- 在事件委托中同时监听
click和keydown - 当
event.key === 'Enter' || event.key === ' '且event.target.matches('.accordion-header')时，执行同点击一致的展开/收起逻辑 - 确保标题有
tabindex="0"，使其可聚焦
注意动态内容与初始化状态
如果 Accordion 面板是异步加载或运行时插入的，事件委托天然适配；但初始状态（如默认展开某一项）需在 DOM 加载后主动设置属性和样式。
- 遍历所有
.accordion-header，根据是否有data-open="true"或aria-expanded="true"初始化对应面板 - 避免在监听器里重复查询 DOM，可缓存
headers = container.querySelectorAll('.accordion-header')提升性能 - 若需多开（非互斥），则取消“先关所有”的步骤，只操作当前项
不复杂但容易忽略细节，关键是把状态管理（展开项索引或元素引用）、DOM 属性同步、动画衔接三者串起来，事件委托就真正发挥了作用。
