自定义details标签需重置summary样式、用JS控制max-height动画、扩展点击热区并保留无障碍语义；因原生支持弱，须结合CSS重置、动态高度测量及ARIA属性补全。
details标签默认行为不满足需求，怎么自定义样式
浏览器对 <details></details> 的原生样式支持很弱，比如 Chrome 默认有小箭头、Firefox 用加号、Safari 箭头方向还不一样。直接写 CSS 时会发现 summary 无法用 ::before/::after 添加图标（因为它是替换元素），且 details[open] 的过渡动画不生效。
实操建议：
- 重置
summary的默认列表样式：summary { list-style: none; } - 用
summary::marker控制原生箭头（Chrome/Firefox 支持，Safari 16.4+ 才支持）：summary::marker { content: "▶"; }，再配合details[open] summary::marker { content: "▼"; } - 若需兼容旧 Safari 或统一图标，改用
<span></span>包裹文字，在summary内部手动加图标，再用 JS 切换 class 控制旋转 - 展开内容区域（
<details></details>的子元素，除<summary></summary>外的部分）默认是display: block，但高度无法直接 transition，得配合max-height+overflow: hidden模拟动画
用CSS实现平滑展开收起动画
<details></details> 自身不触发 CSS 过渡，必须手动监听 toggle 事件并切换 class，再靠 class 控制 max-height 变化。
常见错误：直接给 details > *:not(summary) 加 transition: max-height 0.3s，但初始 max-height: 0 和目标值（如 max-height: 500px）之间无法自动计算——CSS 不知道内容实际高度。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用 JS 获取内容区域
scrollHeight，动态设置max-height：el.style.maxHeight = el.scrollHeight + "px" - 收起时先设
max-height为当前值，再用setTimeout设为0，触发重排 - 为避免布局抖动，内容区域需设
overflow: hidden，且内部元素不能有margin-top（否则展开瞬间会跳） - 更轻量的替代方案：用
height+opacity组合动画，但需提前知道固定高度或用 JS 测量
summary点击区域太小，如何扩大可点击范围
原生 summary 只响应文字和默认 marker 区域的点击，左右留白或图标外侧点不中。这不是 bug，是规范定义的行为。
实操建议：
- 给
summary设display: block+padding，但注意 padding 不会扩大“触发折叠”的热区，只影响视觉范围 - 真正有效的是用
summary::before或summary::after伪元素占位，并设pointer-events: none，让点击穿透到父级summary；但前提是伪元素本身不阻断事件 - 最可靠方式：包裹一层
<div>，监听该 div 的 click 并调用 <code>detailsEl.toggleAttribute("open")，同时隐藏原生summary的 pointer-events - 别忘了加
cursor: pointer提示用户这是可交互区域 - 不要移除
<summary></summary>，哪怕它被视觉隐藏——它是焦点和朗读的关键节点 - 如果用了自定义按钮控制
details，必须同步设置aria-expanded和aria-controls - 用
details[open] > *:not(summary)控制内容显示时，确保内容区域没有display: none（否则屏幕阅读器读不到），改用visibility: hidden+height: 0等组合 - 测试时用 VoiceOver（macOS）或 NVDA（Windows）+ Firefox，检查是否能正确播报“已折叠/已展开”状态
无障碍与键盘支持容易被忽略的细节
<details></details> 原生支持屏幕阅读器和空格/Enter 键切换，但一旦用 JS 覆盖默认行为（比如手动 toggle open），就可能破坏语义。
实操建议：
