标签实现折叠展开最直接，但需确保为首个子元素，注意Safari和旧版WebView兼容性，CSS自定义箭头推荐list-style:none+::before，高度动画须用max-height过渡而非原生height。

标签是让段落文字支持折叠展开最直接的方案，不用写 JS，语义正确，键盘和屏幕阅读器都原生支持。但实际用起来，不是贴上代码就完事——结构错一点、浏览器旧一点、样式动一下，就可能点不动或动画失效。

为什么 <details></details> 有时点不动

不是代码语法错了，而是触发机制被悄悄破坏了：

• <summary></summary> 必须是 <details></details> 的第一个子元素；中间插个 <div>、注释、甚至空格都会让折叠逻辑失效 <li>Safari 15.4 之前不响应 <code>el.open = true 这类 JS 赋值，得用 el.setAttribute('open', '') 才可靠
• 微信/QQ 安卓旧版 WebView 可能始终展开或完全无响应，真机测试不能跳过
• 嵌套 <details></details> 在部分浏览器中会中断事件冒泡，导致内层无法点击

怎么用 CSS 自定义 <summary></summary> 样式又不翻车

浏览器对 <summary></summary> 的样式控制有限，尤其箭头图标容易失控：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 别直接用 summary::marker { content: ""; } 隐藏默认箭头——Safari 不认这个写法
• 稳妥做法是 summary { list-style: none; }，再用 summary::before 补自定义图标
• 要加旋转动画？给 summary::before 设 transition: transform 0.2s，再配合 details[open] summary::before { transform: rotate(90deg); }
• 别给 <details></details> 设 height 或 max-height 过渡——它不支持，强行加只会卡顿或无效

需要平滑高度动画时，必须放弃原生 <details></details>

原生 <details></details> 没有 height 过渡能力，所有“滑动展开”效果都是模拟出来的：

• 改用 max-height + overflow: hidden + transition 组合，初始设 max-height: 80px（略高于行高），展开态设为足够大的值（如 500px），但别设成 none 或 auto，否则过渡失效
• JS 切换状态时，优先读 el.dataset.expanded 而不是查 class，更可靠
• 内容含图片或异步加载时，展开后需调用 el.offsetHeight 强制重排，确保 scrollHeight 计算准确
• 如果段落里有 <ul></ul>、<strong></strong> 没问题，但含 float、position: absolute 或 flex 子项，可能撑不出真实高度，导致底部被截断
关键点在于：原生方案省事但边界多，自定义方案灵活但得自己管高度、状态、可访问性。多数项目里，先用 <details></details> 快速上线，等设计提出动效或兼容需求再切过去，比一开始硬上 JS 更稳。