closest实现多级联动折叠面板的核心是通过e.target.closest('.accordion-group')精准定位最近一级面板容器，避免硬编码层级；配合dataset管理展开状态，向上查找未展开父级并逐级设置data-expanded="true"，收起时仅作用于目标group后代，结合事件委托提升可维护性与健壮性。
用 closest 实现多级联动折叠面板，核心在于“从任意触发元素出发，精准定位它所属的最近一级面板容器”，从而避免硬编码层级、减少 DOM 查询次数、提升可维护性。
用 closest 定位当前操作的面板组
点击标题（.accordion-header）时，不靠父级 class 名硬推层级，而是用 closest('.accordion-group') 向上找离它最近的面板容器。这样无论标题嵌套几层（比如在卡片内、模态框里、甚至另一个 accordion 内），都能准确定位归属。
示例代码：
document.addEventListener('click', e => {
if (e.target.matches('.accordion-header')) {
const group = e.target.closest('.accordion-group');
if (!group) return;
// ✅ 此时 group 就是当前被操作的面板容器
}
});
配合 dataset 管理多级展开状态
多级联动意味着：子面板展开时，所有上级面板也必须处于展开态。可在每个 .accordion-group 上用 data-expanded="true" 标记状态，并让 closest 配合遍历祖先。
- 点击子面板标题 → 用
closest('.accordion-group')找到自己 - 再用
closest('.accordion-group[data-expanded="false"]')向上找第一个未展开的父级 - 逐级设置
data-expanded="true"，并展开对应内容区
收起时只影响后代，不误触兄弟节点
关闭一个面板，不能简单地把所有同级都收起。正确做法是：收起目标 .accordion-group 后，再用 querySelectorAll 查找它的 .accordion-group 后代，统一收起它们。
关键点：closest 只向上找，不会跨树；而 querySelectorAll 在当前 group 下查，天然隔离作用域。二者配合，逻辑边界清晰，无副作用。
事件委托 + closest 是解耦的关键
动态添加的面板、服务端渲染的嵌套结构、微前端中跨模块的 accordion —— 这些场景下，不能对每个 header 单独绑定事件。统一用 document 或 container 委托，再靠 e.target.closest('.accordion-header') 判断是否命中，既轻量又健壮。
小技巧：用 matches 预检 + closest 定位，比反复调用 closest 更高效：
if (e.target.matches('.accordion-header, .accordion-header *')) {
const header = e.target.closest('.accordion-header');
const group = header?.closest('.accordion-group');
}
