通过 javascript 监听按钮点击事件，动态添加/移除 `active` 类，结合 css 过渡动画控制内容显隐与箭头位置，即可实现单次点击展开、再点击收起的持久化交互效果。
要让按钮具备“按一次展开、再按一次收起”的切换行为（即状态持久化），纯 CSS 的 :active 或 :hover 伪类无法满足需求——它们仅在用户按下或悬停时临时生效，松开即失效。必须借助 JavaScript 维护一个可切换的布尔状态，并通过 CSS 类名驱动样式变化。
✅ 核心实现思路
- HTML 结构优化：将
- JS 逻辑：为 .bottom-arrow 元素绑定 click 事件，使用 classList.toggle('active') 切换容器 #hidden-content 的状态类；
- CSS 响应式控制：用 #hidden-content.active 替代原 :active 伪类，精准控制 #list 的 max-height 过渡及箭头位置动画。
? 完整代码整合（含关键注释）
/* 关键修改：将 :active 改为 .active */
#hidden-content #list {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease-in-out; /* 统一过渡时间，更平滑 */
}
#hidden-content.active #list {
max-height: 500px; /* 建议设为足够容纳全部内容的值，或使用 fit-content + height:auto 配合 JS 动态计算 */
}
#hidden-content.active .bottom-arrow {
bottom: -25px;
transition: bottom 0.25s ease-out;
}⚠️ 注意事项与进阶建议
- 无障碍友好：当前
- 性能优化：避免对 max-height 过渡使用 auto（不支持动画），若列表高度不确定，可用 JS 动态测量 scrollHeight 并赋值，实现自适应展开；
- 视觉反馈：可为 .bottom-arrow 添加旋转动画（如 transform: rotate(180deg)）增强状态感知，配合 transition: transform 0.3s；
- 移动端兼容性：确保 cursor: pointer 和 touch-action: manipulation 已设置，提升触控响应体验。
该方案简洁可靠，兼顾可维护性与可访问性基础，是现代 Web 中实现折叠面板（Accordion）的标准实践之一。
