<details> 默认不是手风琴，因浏览器将其视为独立控件，互不影响；实现单开需JS监听toggle事件并手动关闭兄弟节点，CSS无法监听同级状态。
直接用 <details> 和 <summary> 就能实现原生、无障碍、无需 JS 的折叠效果，但默认样式简陋、浏览器兼容性有坑，且手风琴（单开一栏）需额外控制。
为什么 <details> 默认不是手风琴？
浏览器把每个 <details> 当作独立控件，展开互不影响。要实现“点一个关其他”，得用 JS 监听 toggle 事件并手动关闭兄弟节点。
- 不能靠 CSS 实现手风琴逻辑 —— 没有“同级已展开”伪类
- 监听
toggle比监听click更可靠，因为支持空格/回车触发、屏幕阅读器操作 - 注意：
toggle事件在元素展开/收起后才触发，此时open属性已是新状态
如何修复 Safari 和旧版 Edge 的兼容问题？
<details> 在 Safari 12.1+ 和 Edge 79+ 才完全支持，更早版本会忽略标签、直接显示全部内容。不加降级处理会导致信息全部裸露。
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
- 必须为
<details>设置display: block，否则 Safari 可能渲染为 inline 导致换行异常 - 用
@supports (display: details)或 UA 检测做渐进增强，降级方案可加class="js-details-fallback"并用 JS 补全行为 - IE 完全不支持，必须走 JS 方案（如
aria-expanded+max-height动画）
怎么让 <summary> 前的三角符号消失或自定义？
所有浏览器都用 ::marker 或伪元素渲染默认箭头，但各厂实现不同：Chrome/Firefox 支持 list-style: none 隐藏，Safari 需用 appearance: none + 自定义 ::before。
- 统一写法：
summary { list-style: none; appearance: none; } - 再用
summary::before { content: "▶"; transform: rotate(0deg); transition: transform .2s; }+details[open] summary::before { transform: rotate(90deg); } - 别用
background-image替换箭头 —— 会破坏高对比度模式下的可访问性
折叠内容里放表单或 iframe 会出什么问题？
内容收起时，<details> 不会销毁 DOM，但部分浏览器（尤其是 Safari）会对 display: none 内的 <iframe> 暂停加载或重置状态；<input> 失去焦点后再次展开可能不自动聚焦。
- 避免在
<details>内嵌未设置loading="lazy"的<iframe>，防止意外加载 - 如果需要展开后自动聚焦到某个
<input>，得在toggle事件里手动focus()，且加setTimeout等 DOM 重排完成 - 动态内容（如通过 JS 渲染的图表）建议在
details[open]为真时再初始化，省性能
真正麻烦的不是写几行 HTML，而是当设计要求“点击标题区域任意位置都响应”“键盘操作必须符合 WCAG 2.1”“移动端点透要防”“服务端渲染首屏不能闪动”时，原生标签的边界就立刻暴露了。
