不能直接用 的 open 属性做响应式折叠面板，因其不支持单选互斥、无法精确控制高度/动画/点击区域，且移动端易误触；改用 input[type="radio"] + label 可通过 :checked ~ 触发样式、设固定 max-height 实现过渡，并保障可访问性与兼容性。
为什么不能直接用 <details></details> 的 open 属性做响应式折叠面板？
因为原生 <details></details> 不支持单选互斥（多个面板同时展开），且无法用 CSS 精确控制未展开时的容器高度、过渡动画或禁用点击区域。更关键的是：在移动端小屏下，<summary></summary> 的默认 focus 样式和点击热区常导致误触，而 input[type="radio"] 可以绑定 :checked 状态并完全接管行为，更可控。
用 input[type="radio"] + label 模拟折叠状态的关键写法
核心是把 radio 的 :checked 状态映射到后续兄弟元素（如 .panel-content）的显示/隐藏，并用 ~ 选择器触发样式变化：
<input type="radio" name="accordion" id="panel-1" class="accordion-toggle"><label for="panel-1" class="accordion-header">标题一</label> <div class="panel-content">内容区域</div>
.panel-content 默认设为 max-height: 0; overflow: hidden;，当对应 radio 被选中时，用以下规则展开：
.accordion-toggle:checked ~ .panel-content {
max-height: 500px; /* 需设具体值，CSS 无法 transition auto */
opacity: 1;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
- 必须给
max-height设一个「足够大但不过度」的固定值（如500px），否则过渡无效 - 避免用
height: auto或display: none—— 它们无法被 transition - radio 元素本身要
position: absolute; clip: rect(0 0 0 0);隐藏但保留可访问性
如何让单选互斥且默认关闭所有面板？
靠 HTML 结构和 name 属性天然实现互斥，但「默认全关」需要额外处理：
- 所有
input初始不加checked属性 —— 这是最干净的方式 - 如果需服务端渲染默认展开某一项，只给对应
input加checked，其余不加 - 不要用 JavaScript 初始化
checked，否则 SSR 和首屏渲染可能闪烁 - 注意：若用
name分组不当（比如不同面板用了不同 name），就会失去互斥性
移动端点击区域与可访问性补救措施
label 默认点击热区太小，且屏幕阅读器对纯视觉折叠控件识别弱：
- 给
.accordion-header加padding: 1rem;并设cursor: pointer; - 在
label内添加aria-expanded和aria-controls属性（需 JS 同步更新） - 用
prefers-reduced-motion媒体查询降级过渡：@media (prefers-reduced-motion: reduce) { transition: none; } - 避免仅靠颜色区分展开/折叠状态 —— 加图标（如
::after旋转箭头）并用transform: rotate(0deg)/rotate(90deg)配合 transition
真正难的不是让面板动起来，而是让它们在 Safari iOS 上不闪退、在 VoiceOver 下能说清当前状态、在低配安卓机上不卡顿 —— 这些细节比动画本身更消耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
