原生支持无JS折叠展开，但必须为首个子元素，中间不能有空格、注释或其它标签，否则点击失效；open为布尔属性，仅存在即默认展开。
直接用 <details></details> + <summary></summary> 就能实现，不需要 JS，但必须确保 <summary></summary> 是 <details></details> 的第一个子元素，否则点不动。
为什么<details></details>有时点击没反应
不是代码写错了，而是触发条件被破坏了：
-
<summary></summary>必须是<details></details>的首个子元素，中间插个<div>、注释或空格都会让折叠失效 <li>Safari 15.4 之前不响应 <code>el.open = true这类 JS 赋值，得用el.setAttribute('open', '') - 微信、QQ 安卓旧版 WebView 可能始终展开或完全无响应，真机测试不能跳过
- 嵌套另一个
<details></details>在部分浏览器中会静默失败，不报错也不生效 - 隐藏默认三角：用
summary::marker { content: ""; }（Chrome/Firefox 有效），Safari 需补summary { list-style: none; }+summary::before手动加图标 - 旋转动画要配合
details[open] summary::before { transform: rotate(90deg); }和transition: transform 0.2s - 要滑动效果？必须放弃原生行为，改用
max-height+overflow: hidden+transition，此时需 JS 控制类名切换 - 别设
max-height: auto—— CSS 过渡不支持它，预估一个安全上限值（比如max-height: 600px）更稳 - 不要靠
classList.contains('active')判断展开态，改用data-expanded="true"属性，避免其他逻辑干扰 - 如果文章含多个
<details></details>，默认都收起；想默认展开某一段，只在对应标签加open属性即可 - 第三方富文本编辑器（如微信公众号后台）可能过滤
<details></details>标签，上传前务必实测渲染结果 - 用
details[open]选择器做样式时，注意它不触发重排，但无法用于 JS 查询 —— 得用el.hasAttribute('open')
如何用 CSS 自定义展开箭头和动画
原生 <summary></summary> 不支持 height 或 display 过渡，但可以控制视觉反馈：
文章详情里多段折叠内容怎么管理状态
纯 HTML 原生方案不记录状态，刷新即丢失；JS 方案要注意 DOM 顺序和冲突：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：当文章内容由 JS 动态插入（比如 Markdown 渲染后挂载），<details></details> 不会自动绑定交互逻辑，必须手动调用 el.setAttribute('open', '') 或触发一次 click 模拟。原生标签不是“写完就跑”，它依赖初始 DOM 结构完整性。
