折叠展开失效主因是非首个子元素，空格、换行、其他标签或注释均会破坏浏览器识别；open为布尔属性，存在即展开；自定义箭头需用::before兼容；手风琴需js控制同级状态；webview兼容性须真机测试。
直接用 <details></details> 和 <summary></summary> 就能实现无 JS 的折叠展开，但结构错一丁点就点不动——不是功能没做，是浏览器压根不认。
为什么点了没反应？检查 <summary></summary> 是不是第一个子元素
浏览器只认紧贴 <details></details> 开始标签后的第一个 <summary></summary>。中间夹个空格、换行、<p></p> 或注释，都会让点击逻辑静默失效。
- ✅ 正确：
<details><summary>标题</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details> - ❌ 错误：
<details><p></p> <summary>标题</summary><p>内容</p></details>（<p></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></summary>设pointer-events: none，整个点击区域就废了
想做手风琴效果（点一个、关其他），JS 绕不开
原生 <details></details> 之间互不影响。要单开模式，得用 JS 手动控制同级所有项的 open 状态。
- 把所有
<details></details>包进同一个容器，比如<div class="accordion"> <li>监听每个 <code><details></details>的 click 事件，遍历同级项设p.open = false，再设当前项panel.open = true - ⚠️ 不要单独给
<summary></summary>绑 click，会和原生 toggle 冲突，触发两次 - ⚠️ 不要对
<details></details>做height过渡——它高度由内容决定，height: auto不支持 transition
真正麻烦的是 WebView 兼容性：微信、钉钉、QQ 内置浏览器对 <details></details> 支持程度不一，有些始终展开，有些点不动。上线前必须真机测，不能只靠桌面浏览器判断。
