标签可免JS实现折叠，但需满足：必须为首个子元素；旧版Safari不支持JS设open；微信/QQ安卓WebView可能忽略open属性；内嵌或会触发双重行为；默认收起，仅open属性可展开；自定义箭头需隐藏::marker并手动添加；过渡需用max-height；不适用需存状态、兼容IE、非块级元素或批量控制场景。

<details></details> 标签就能直接实现，不用写 JS，但必须满足几个硬性条件，否则点不动、不收起、默认状态错乱都是常态。

为什么<details></details>点一下没反应

不是代码写错了，而是 DOM 结构或属性被悄悄破坏了：

• <summary></summary> 必须是 <details></details> 的第一个子元素——中间插个 <div>、注释、甚至换行符（文本节点）都会让折叠失效 <li>旧版 Safari（≤15.4）不响应 <code>el.open = true 这类 JS 赋值，得用 el.setAttribute('open', '')
• 微信 / QQ 安卓 WebView（尤其 8.x 及更早）可能完全忽略 open 属性，始终展开或始终收起，真机测试不能跳过
• <summary></summary> 里嵌套 <a></a> 或 <button></button> 会触发默认行为（跳转/提交），同时也会触发折叠，造成意外交互

怎么让文本默认展开而不是收起

浏览器规范强制默认收起，没有例外。要默认展开，只有一种方式：加 open 属性。

正确写法只有两种：<details></details>（收起）或 <details open></details>（展开）。注意：open="false" 没用，写了就生效，删掉才收起。

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


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载

服务端渲染时可动态插入 open 属性控制初始状态；客户端想响应用户操作再展开，仍得监听 toggle 事件，但初始态纯 HTML 就能定死。

怎么自定义箭头和过渡动画

<details></details> 原生箭头无法用 CSS 直接替换，但可以隐藏并重绘：

• 用 summary::marker { display: none; } 干掉原生符号
• 在 <summary></summary> 内手动加 <span class="arrow">▶</span>，再用 CSS 控制旋转：.details[open] .arrow { transform: rotate(90deg); }
• 平滑过渡只能靠 max-height + transition，但注意：max-height: none 或 auto 无法过渡，得设一个“足够大但确定”的值（比如 500px）
• 若内容高度差异大，建议 JS 获取 scrollHeight 后再设 max-height，避免动画卡顿或截断

什么时候不该用<details></details>

它只适合语义明确、结构简单、无需持久状态的披露场景。以下情况必须手写 JS + CSS：

• 需要折叠状态存 localStorage 或 URL hash
• 要支持 IE 或要求滚动动画（<details></details> 不提供 scrollIntoView 行为）
• 目标元素不是块级容器，比如想对单个 <p></p> 或表格某几行做折叠
• 需批量控制多个区域（如“全部展开/收起”按钮），<details></details> 无原生批量 API

最易被忽略的是：看似只是“加个箭头”，实际涉及 marker 渲染时机、伪元素继承、无障碍属性同步等细节，一旦混合 CSS-in-JS 或 Shadow DOM，<summary></summary> 的点击热区可能意外缩小或消失。