<details>原生支持按需展开，语义清晰且无障碍友好；关键要求是<summary>必须为首个子元素，否则失效；默认收起，加open属性可默认展开；内部可嵌套任意HTML；兼容性差，IE不支持，旧Android WebView异常，需渐进增强。
用 <details> 和 <summary> 实现原生按需展开
浏览器原生支持，不用 JS 就能实现点击展开/收起，语义清晰、无障碍友好。关键点是：<summary> 必须是 <details> 的第一个子元素，否则无法触发折叠逻辑。
常见错误：把 <summary> 放在中间或末尾，或者用 div 包裹它——这会让浏览器忽略其控制行为，<details> 会始终处于展开态。
-
<details>默认是收起状态；加open属性可默认展开 -
<summary>内容会始终可见，点击后才切换内部其他内容的显示/隐藏 - 内部可以放任意 HTML（包括表单、图片、甚至嵌套
<details>）
<details> <summary>点击查看配置项</summary> <p>端口：<pre class="brush:php;toolbar:false;">8080</code></p> <p>环境：<code>production</code></p> </details>
样式定制必须覆盖 summary::marker 和默认箭头
不同浏览器对 <summary> 前的三角符号（marker）渲染不一致：Chrome/Firefox 显示实心箭头，Safari 是空心，且默认不可选中、无法通过 color 直接改色。直接写 summary { font-weight: bold; } 没问题，但想换图标或隐藏箭头，必须处理 ::marker。
- 隐藏原生箭头：
summary::marker { content: ""; } - 替换成自定义符号（如 + / −）：
summary::marker { content: "+"; }，再配合 JS 切换状态时更新 - 注意 Safari 16.4+ 才完全支持
::marker的content，旧版需用list-style: none+position: relative模拟
JS 控制展开状态要操作 open 属性，不是 display
手动调用 element.open = true 或 element.setAttribute('open', '') 才能同步 UI 与 DOM 状态；如果只改 style.display，<details> 的语义和键盘导航（如回车触发）会失效。
- 监听展开/收起事件用
toggle事件：el.addEventListener('toggle', () => {...}) - 批量控制多个
<details>时，避免用querySelectorAll('details').forEach(d => d.open = false)—— 这会强制重排，建议加class配合 CSSdetails:not(.active) > *:not(summary) { display: none; } - 服务端渲染时若预设
open，注意 SSR 框架（如 Next.js）可能因 hydration 不匹配报 warning，需用useEffect或useClient延迟设置
兼容性边界：IE 完全不支持，旧 Android WebView 表现异常
<details> 在 IE 中彻底不可用（连标签都不识别），Android 4.4–6.x 的 WebView 会渲染但不响应点击。不能只靠它做核心功能降级。
- 渐进增强方案：先确保所有内容在无 JS、无
<details>时仍可读（即不依赖 JS 展开） - 检测支持性可用
'open' in document.createElement('details')，返回false时 fallback 到 JS 实现的折叠组件 - CSS 中慎用
details[open] > summary::marker { content: "−"; }这类选择器——部分老版本 Chrome 不支持属性选择器作用于伪元素
最常被忽略的是焦点管理：默认 <summary> 可聚焦、可空格/回车触发，但如果内部有表单控件，收起时应主动 blur()，否则键盘用户可能卡在不可见区域。
