用detailssummary实现可折叠估价规则语义清晰且原生支持键盘与屏幕阅读器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/detailsdetails 默认是收起状态加 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% 漏掉某一种行为。立即学习“前端免费学习笔记深入” Zeemo AI 一款专业的视频字幕制作和视频处理工具