标准答案
- details 表示一块可展开收起的内容，summary 是用户可点击的标题。
- 它适合 FAQ、说明折叠、附加信息和不复杂的详情展示。
- 浏览器会维护 open 属性，并提供基础键盘和屏幕阅读器语义。
- 手写折叠组件适合复杂动画、受控展开、多项互斥、异步内容和统一设计系统。
- 使用 details 时 summary 必须清楚表达展开内容，不要只写“更多”。
题目解析
这题的取舍是原生语义和定制能力。简单折叠优先考虑原生元素，复杂交互再上组件。
details 本身不是万能手风琴组件，跨项状态和动画细节需要额外处理。
代码示例
open 属性表示当前默认展开。
HTML
<details open>
<summary>浏览器兼容说明</summary>
<p>这里展示详细说明内容。</p>
</details>常见误区
- 用 div 和 click 手写简单折叠，却没有补键盘和可访问语义。
- summary 文案太模糊，用户不知道展开后会看到什么。
- 在需要复杂状态同步的场景里强行依赖 details，导致交互不可控。