默认不是手风琴，因浏览器将其视为独立控件，互不影响；实现单开需js监听toggle事件并手动关闭兄弟节点，css无法监听同级状态。

直接用 <details></details> 和 <summary></summary> 就能实现原生、无障碍、无需 JS 的折叠效果，但默认样式简陋、浏览器兼容性有坑，且手风琴（单开一栏）需额外控制。

为什么 <details></details> 默认不是手风琴？

浏览器把每个 <details></details> 当作独立控件，展开互不影响。要实现“点一个关其他”，得用 JS 监听 toggle 事件并手动关闭兄弟节点。

• 不能靠 CSS 实现手风琴逻辑 —— 没有“同级已展开”伪类
• 监听 toggle 比监听 click 更可靠，因为支持空格/回车触发、屏幕阅读器操作
• 注意：toggle 事件在元素展开/收起后才触发，此时 open 属性已是新状态

如何修复 Safari 和旧版 Edge 的兼容问题？

<details></details> 在 Safari 12.1+ 和 Edge 79+ 才完全支持，更早版本会忽略标签、直接显示全部内容。不加降级处理会导致信息全部裸露。

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

• 必须为 <details></details> 设置 display: block，否则 Safari 可能渲染为 inline 导致换行异常
• 用 @supports (display: details) 或 UA 检测做渐进增强，降级方案可加 class="js-details-fallback" 并用 JS 补全行为
• IE 完全不支持，必须走 JS 方案（如 aria-expanded + max-height 动画）

怎么让 <summary></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></details> 不会销毁 DOM，但部分浏览器（尤其是 Safari）会对 display: none 内的 <iframe></iframe> 暂停加载或重置状态；<input> 失去焦点后再次展开可能不自动聚焦。

• 避免在 <details></details> 内嵌未设置 loading="lazy" 的 <iframe></iframe>，防止意外加载
• 如果需要展开后自动聚焦到某个 <input>，得在 toggle 事件里手动 focus()，且加 setTimeout 等 DOM 重排完成
• 动态内容（如通过 JS 渲染的图表）建议在 details[open] 为真时再初始化，省性能

真正麻烦的不是写几行 HTML，而是当设计要求“点击标题区域任意位置都响应”“键盘操作必须符合 WCAG 2.1”“移动端点透要防”“服务端渲染首屏不能闪动”时，原生标签的边界就立刻暴露了。