<details>折叠展开失效主因是<summary>非首个子元素，空格、换行、其他标签或注释均会破坏浏览器识别；open为布尔属性，存在即展开；自定义箭头需用::before兼容；手风琴需JS控制同级状态；WebView兼容性须真机测试。
直接用 <details> 和 <summary> 就能实现无 JS 的折叠展开，但结构错一丁点就点不动——不是功能没做，是浏览器压根不认。
为什么点了没反应？检查 <summary> 是不是第一个子元素
浏览器只认紧贴 <details> 开始标签后的第一个 <summary>。中间夹个空格、换行、<p> 或注释，都会让点击逻辑静默失效。
- ✅ 正确：
<details><summary>标题</summary><p>内容</p></details> - ❌ 错误：
<details><p></p><summary>标题</summary><p>内容</p></details>（<p>挡在前面） - ⚠️ 隐形坑：多行写法里缩进产生的空白文本节点也算“第一个子元素”，建议用
<!-- -->消除或写成单行
open 属性怎么设才生效
open 是布尔属性，只看存在与否，不看值。写 open="false" 或 open="" 都等于开了。
- 默认收起：直接写
<details><summary>...</summary></details> - 默认展开：加
open属性，<details open><summary>...</summary></details> - JS 控制：用
el.open = true或el.toggleAttribute('open')，别用setAttribute('open', 'open')模拟
自定义箭头图标，别碰 ::marker 直接开干
::marker 在 Safari ≤15.6 和旧 Edge 里不生效，::-webkit-details-marker 又只管 WebKit。最稳的方案是绕过它，用 ::before。
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生箭头：
summary::marker { display: none; }（现代浏览器有效） - 补图标（兼容写法）：
summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - ⚠️ 别给
<summary>设pointer-events: none，整个点击区域就废了
想做手风琴效果（点一个、关其他），JS 绕不开
原生 <details> 之间互不影响。要单开模式，得用 JS 手动控制同级所有项的 open 状态。
- 把所有
<details>包进同一个容器，比如<div class="accordion"> - 监听每个
<details>的 click 事件，遍历同级项设p.open = false，再设当前项panel.open = true - ⚠️ 不要单独给
<summary>绑 click，会和原生 toggle 冲突，触发两次 - ⚠️ 不要对
<details>做height过渡——它高度由内容决定，height: auto不支持 transition
真正麻烦的是 WebView 兼容性：微信、钉钉、QQ 内置浏览器对 <details> 支持程度不一，有些始终展开，有些点不动。上线前必须真机测，不能只靠桌面浏览器判断。
