通过 javascript 监听按钮点击事件，动态添加/移除 `active` 类，结合 css 过渡动画控制内容显隐与箭头位置，即可实现单次点击展开、再点击收起的持久化交互效果。
要让按钮具备“按一次展开、再按一次收起”的切换行为（即状态持久化），纯 CSS 的 :active 或 :hover 伪类无法满足需求——它们仅在用户按下或悬停时临时生效，松开即失效。必须借助 JavaScript 维护一个可切换的布尔状态，并通过 CSS 类名驱动样式变化。
✅ 核心实现思路
- HTML 结构优化：将 <label> 作为可点击触发器（语义清晰且无需额外 JS 绑定事件），确保其 for 属性指向一个隐藏 <input type="checkbox">（可选方案），但本例采用更简洁的直接 DOM 操作；
- JS 逻辑：为 .bottom-arrow 元素绑定 click 事件，使用 classList.toggle('active') 切换容器 #hidden-content 的状态类；
- CSS 响应式控制：用 #hidden-content.active 替代原 :active 伪类，精准控制 #list 的 max-height 过渡及箭头位置动画。
? 完整代码整合（含关键注释）
<!-- 在 body 底部添加 script 标签，确保 DOM 加载完成 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const trigger = document.querySelector('.bottom-arrow');
const hiddenContent = document.getElementById('hidden-content');
trigger.addEventListener('click', function() {
hiddenContent.classList.toggle('active');
});
});
</script>/* 关键修改：将 :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;
}⚠️ 注意事项与进阶建议
- 无障碍友好：当前 <label> 未关联实际表单控件，建议补充隐藏的 <input type="checkbox" id="trigger" class="visually-hidden">，并让 label[for="trigger"] 控制它，再通过 :checked 伪类驱动样式（纯 CSS 方案），但需注意 Safari 对 :checked + .content 后续兄弟选择器的支持限制；
- 性能优化：避免对 max-height 过渡使用 auto（不支持动画），若列表高度不确定，可用 JS 动态测量 scrollHeight 并赋值，实现自适应展开；
- 视觉反馈：可为 .bottom-arrow 添加旋转动画（如 transform: rotate(180deg)）增强状态感知，配合 transition: transform 0.3s；
- 移动端兼容性：确保 cursor: pointer 和 touch-action: manipulation 已设置，提升触控响应体验。
该方案简洁可靠，兼顾可维护性与可访问性基础，是现代 Web 中实现折叠面板（Accordion）的标准实践之一。
