3、定义激活类.accordion-open，其中设置max-height为预估最大高度值（如500px）或使用fit-content（需配合height: auto与JS动态计算）。

4、为每个.accordion-header绑定click事件，切换相邻.accordion-content的.accordion-open类名。

三、JavaScript动态测量高度实现精准过渡（无硬编码方案）

避免因内容长度变化导致max-height设值不准而出现跳动或截断，此方案在点击时实时获取内容高度并应用为过渡目标值，保证动画自然流畅。

1、为每个.accordion-content添加data-accordion-target属性以建立与对应标题的关联。

2、点击标题时，先移除所有已展开项的active类，再判断当前目标是否已展开。

3、若未展开，调用getBoundingClientRect().height获取内容实际高度，将其赋值给style.maxHeight，随后添加active类触发过渡。

4、若已展开，立即将maxHeight设为0，并在transitionend事件中移除active类并清除maxHeight内联样式。

四、使用CSS Grid与subgrid模拟多级手风琴（结构化布局方案）

当需要呈现嵌套层级（如分类→子类→条目）时，可借助CSS Grid的subgrid特性维持对齐，配合JavaScript控制各层级显隐，保持视觉一致性与响应式稳定性。

1、外层容器启用display: grid并定义行轨道，每项占据一行，使用grid-template-rows: subgrid让子容器继承父轨道。

2、每项标题设置grid-row定位，对应内容区使用grid-row: span 2占位，初始visibility: hidden与opacity: 0。

3、展开时，将内容区设为visibility: visible、opacity: 1，并添加transform: translateY(0)配合过渡。

4、为防止高度塌陷影响网格布局，对内容区父容器设置min-height: 0并启用overflow: hidden。

五、无障碍增强：添加ARIA属性与键盘支持

确保手风琴菜单符合WCAG标准，支持屏幕阅读器与键盘操作（如Tab导航、Enter/Space触发），提升可访问性。

1、为.accordion-header添加role="button"、aria-expanded="false"及aria-controls="content-id"，指向对应内容区ID。

2、为.accordion-content添加role="region"、aria-labelledby="header-id"，建立语义关联。

3、监听keydown事件，在焦点位于标题上时，按下Enter或Space键触发展开/收起逻辑。

4、展开后自动将焦点移至内容区首子元素（如有），或保持焦点在标题上并更新aria-expanded状态。