+原生支持无JS折叠展开，但必须确保为的首个子元素，中间不能有空格、注释或其它标签，否则交互失效；嵌套在iOS Safari等环境不兼容，协议类内容需注意结构合法性与渲染边界。

直接用 <details></details> + <summary></summary> 就能实现，不用 JS、不写过渡动画也能正常工作；但协议类内容常含代码块、列表、表格，必须注意结构合法性与渲染边界。

为什么<details></details>点开没反应

不是浏览器不支持，而是 DOM 结构被破坏了：

• <summary></summary> 必须是 <details></details> 的第一个子元素，中间插空格、注释、<div> 或 <code><p></p> 都会让折叠逻辑失效
• 协议里常见「条款一」「条款二」嵌套，<details></details> 不能合法嵌套另一个 <details></details>（部分浏览器会静默降级）
• 微信 / QQ 内置 WebView（尤其安卓旧版）可能忽略 open 属性或始终展开，真机测试不可跳过

<summary></summary>里能放标题+编号+状态图标吗

可以，但别动语义关键属性：


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 允许内联样式：加 font-weight、color、padding 没问题
• 禁用 display: block 或 position: absolute —— 这会让它失去按钮语义和键盘焦点能力
• 自定义箭头要用 summary::marker 重置，再用 summary::after 补符号，例如：

  summary::marker { content: ""; }
  summary::after { content: "▶"; margin-left: 8px; transition: transform 0.2s; }
  details[open] summary::after { transform: rotate(90deg); }

协议里有 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 怎么避免折叠后内容被裁剪</pre>

max-height: 0 + overflow: hidden 是常见方案，但原生 <details></details> 不走这套；若你手动实现动画，得防两个坑：

立即学习“前端免费学习笔记（深入）”；

• <pre class="brush:php;toolbar:false;"></pre> 高度受字体加载影响，scrollHeight 可能取小了，导致展开后底部被切——建议监听 load 事件后重设 max-height
• 别用 height: auto 做过渡，CSS 不支持，动画会直接跳变；稳妥做法是预估最大高度（比如 15 行 × 24px ≈ 360px），设 max-height: 360px
• 协议中若有 SVG 或 iframe，它们加载慢且不触发 load，此时 transform: scaleY(0) + overflow: hidden 比 max-height 更可靠

协议文档的折叠核心不是“怎么动”，而是“怎么不崩”：结构守规矩、样式不动语义、动画绕开不可过渡属性。真要兼容 IE 或老 WebView，别硬撑原生方案，直接上 checkbox + CSS 的纯样式 fallback 更省心。