不推荐在生产环境直接用 <details> 实现响应式折叠面板，因其缺乏单选互斥、动画支持、移动端热区适配及可访问性一致性保障。
直接用 <details> + <summary> 实现响应式折叠面板，不推荐作为生产环境的首选方案。它语义正确、开箱即用，但原生行为在真实项目中会频繁踩坑——尤其当你要控制单选互斥、加动画、适配移动端点击热区，或保证可访问性一致性时。
<details> 的 open 属性为什么不能直接用于响应式面板
-
<details open>只是布尔开关，无法用 CSS 选择器监听“是否展开”来触发过渡动画（:has()在 Safari 15.4+ 才稳定支持，且不适用于open属性） - 它天生允许多个
<details>同时展开，没有单选互斥机制；靠 JS 控制又违背“纯 CSS”初衷 -
<summary>默认有display: list-item和::marker，禁用箭头后点击区域变小，移动端容易点空或误触 -
open属性变更不会触发transition，所以max-height或opacity动画完全无效——你只能靠height: auto硬切，视觉上就是“啪”一下闪开
怎么让 <details> 支持基础过渡动画（有限但可行）
必须绕过 open 属性，改用 :focus-within 或 :hover 模拟状态，再配合 max-height：
details {
border: 1px solid #ddd;
}
summary {
padding: 0.75rem 1rem;
cursor: pointer;
}
summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}
/* 关键：用 :focus-within 触发过渡 */
details:focus-within .panel-content {
max-height: 30em;
opacity: 1;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.panel-content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease;
}-
<summary>必须可聚焦（默认就是），否则:focus-within不生效 -
.panel-content必须是<summary>的后续兄弟元素，不能包在<summary>里 -
max-height: 30em是预估值，需根据内容高度调整；设太小会截断，太大动画拖沓 - 此方案仅适用于单击后保持焦点的场景（如键盘用户按 Enter），鼠标点击后焦点可能丢失，动画中断
移动端点击失效或误触的典型原因
-
<summary>在 iOS Safari 中默认有min-height: 24px，但触摸热区常小于视觉区域，导致点不中 - 部分安卓 WebView 忽略无
tabindex="0"的<summary>上的:focus-within -
<details>在部分旧版 Chrome 中，open属性变更不触发重排，max-height过渡被跳过
解决办法：
- 给
<summary>显式加padding: 1rem; min-height: 44px;（满足 WCAG 触摸最小尺寸） - 补充
tabindex="0"（虽非必需，但提升兼容性） - 避免在
<summary>内嵌button或a，它们会劫持事件流，导致:focus-within失效
什么时候可以放心用原生 <details>？
只在以下情况适用：
立即学习“前端免费学习笔记（深入）”；
- 内容极简（如 FAQ 列表），不要求动画、不要求单选、不关心移动端点击精度
- 项目已放弃 IE 和 Safari < 16，且不需 SSR 首屏展开逻辑
- 无障碍要求宽松，能接受屏幕阅读器读出
<summary>但不自动同步aria-expanded
否则，老实用 <input type="radio"> + label + ~ .panel-content 方案更可控——它把状态交还给 CSS，不依赖浏览器对 <details> 的实现差异，也更容易注入 aria-expanded 和 aria-controls。
真正难的不是写动画，而是让展开/收起在所有设备上“点得中、看得清、读得懂、动得顺”。原生标签省事，但省下的代码量，最后往往要靠 hack 和降级填回来。
