用details+summary实现可折叠估价规则，语义清晰且原生支持键盘与屏幕阅读器；summary仅放标题，正文置于其后；禁用aria-expanded手动控制，避免破坏可访问性；主流浏览器兼容良好，但Safari旧版不支持open动画。
HTML里怎么用details实现可折叠的估价规则说明
直接用 details + summary，浏览器原生支持，不用 JS 就能收放，语义清晰还带键盘可访问性。别手痒写 div + onclick 模拟，那是在给自己埋 focus 管理和屏幕阅读器兼容的坑。
常见错误是把整段规则文字塞进 summary 里，结果点一下就展开又立刻收起——因为 summary 只该放标题行，正文必须放在 details 的闭合标签外、summary 后面：
<details> <summary>回收估价逻辑说明</summary> <p>手机成色按A/B/C三级评估：A级无划痕、电池健康≥90%；B级有轻微使用痕迹但功能完好……</p> </details>
-
details默认是收起状态，加open属性可默认展开 - 不要给
summary加display: block或cursor: pointer—— 浏览器已内置交互样式 - 若需兼容 IE（不推荐），得用 JS polyfill，但绝大多数回收页面已不保 IE
为什么不能用aria-expanded手动控制折叠逻辑
有人为了“可控”硬上 aria-expanded + display: none，结果破坏了原生 details 的语义和辅助技术行为。屏幕阅读器会把 details 当作一个可切换区域播报，而纯 div + ARIA 需要额外处理焦点、按键响应（如空格/回车触发）、状态同步，一漏就不可访问。
真实场景中，估价规则页常被老年用户或视障用户查阅，他们依赖读屏软件的结构导航。原生 details 被 JAWS、NVDA、VoiceOver 统一识别为“可展开区域”，手动实现几乎 100% 漏掉某一种行为。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 原生
details支持Enter和Space切换，手动实现容易只响应一种 -
aria-expanded必须与视觉状态严格同步，JS 更新不及时会导致读屏报错状态 - 移动端 Safari 对非原生折叠组件的触摸反馈更弱，用户可能点半天没反应
details在不同浏览器里的表现差异
主流浏览器（Chrome/Firefox/Safari/Edge）对 details 渲染一致，但有两个实际影响体验的细节：
- Safari 在 iOS 15.4 之前不支持
details[open]的 CSS 动画过渡，想加淡入效果得用 JS 监听toggle事件后操作 class - Firefox 会把
summary前的三角符号固定在左端，无法用 CSS 移到右边；其他浏览器允许summary::marker控制位置 - 所有浏览器都不允许用
:has()选中details[open] summary来改样式——得靠 JS 或直接写details[open] summary
如果真要加动画，建议只对内容区做 max-height 过渡，别碰 summary 的显示逻辑。
估价规则文本里哪些 HTML 标签能用、哪些会出问题
details 内容区可以放心用 p、ul、ol、table，但注意三类易踩坑点：
- 别在内部嵌套另一个
details—— 多数浏览器支持，但部分旧版 Android WebView 会卡死或忽略内层状态 - 避免用
script或iframe，规则页不该执行动态脚本，且 iframe 会破坏折叠区域高度计算 - 如果规则含价格公式（如“估价 = 基准价 × 成色系数”），用
var包裹变量名：<var>基准价</var>，比纯文本更利于语义化和后续数据提取
最常被忽略的是：折叠区内容高度变化时，父容器若用了 height: fit-content 或 min-height，可能造成布局抖动。稳妥做法是让 details 自然流式撑开，不设固定高。
