HTML怎么标注回收估价规则_HTML估价逻辑说明折叠区【指南】

用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% 漏掉某一种行为。立即学习"前端免费学习笔记（深入）"； Zeemo AI 一款专业的视频字幕制作和视频处理工具