应直接用 和 ，因其语义正确、键盘可访问、屏幕阅读器友好、代码简洁；手动用 JS 控制 display 或 max-height 会破坏可访问性、导致动画卡顿或内容裁剪，且需额外补全焦点与 ARIA 逻辑。
直接用 <details></details> 和 <summary></summary>，别写 JS 控制 display 或 max-height —— 语义对、键盘可访问、屏幕阅读器能读、代码少、兼容性够用（IE 除外）。
为什么不用 JavaScript 控制 display 或 height
手动切 display: none / block 会丢掉键盘焦点能力（Tab 跳不过去）、破坏屏幕阅读器播报逻辑；而用 max-height + transition 看似有动画，实则容易卡顿或裁剪内容——因为浏览器无法过渡 height: auto，你只能硬写一个上限值（比如 max-height: 500px），内容超了就溢出，不够就留白。
-
display切换不可动画，且让元素彻底退出无障碍树 -
max-height动画依赖预估高度，响应式下极易失效 - 原生
<details></details>自带toggle事件、空格/回车触发、焦点管理，JS 方案得自己补全这些
details 和 summary 的硬性约束
<summary></summary> 必须是 <details></details> 的**第一个直接子元素**，中间不能有空格、换行、<p></p> 或其他标签，否则点击无反应。Safari 旧版（≤15.4）对 JS 设置 open 属性支持差，但 HTML 里写 <details open></details> 是稳的。
- 错误写法：
<details><div><summary>标题</summary></div> <p>内容</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>——<summary></summary>不是直接子元素，失效 - 正确写法：
<details><summary>标题</summary><p>内容</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details> -
<summary></summary>内部禁用<button></button>或<a></a>，它们会拦截原生 toggle 行为
需要自定义样式但不破坏功能
可以改颜色、字体、加图标，但不能动语义结构。默认箭头由 ::marker 渲染，删了它就得自己补；设 display: block 会让 <summary></summary> 失去按钮语义，键盘无法聚焦。
- 安全做法：用
summary::marker { content: none; }隐藏原生箭头，再用summary::after加自定义符号 - 加动画只推荐
opacity和transform: scaleY()，它们可合成、不触发布局重排 - 若需 JS 控制（如 URL 参数自动展开），只操作
details.open或调用details.toggle()，别增删 class 或操作 DOM
兼容 IE 或必须滑动动画怎么办
IE 完全不支持 <details></details>，此时降级方案不是“手写 JS 模拟”，而是用 CSS :target + 锚点，或轻量 JS 监听点击后切 max-height。但注意：Safari 15.4+、Chrome 120+、Firefox 115+、Edge 116+ 全支持，2026 年绝大多数真实用户已无需兼容 IE。
- 真要 JS 动画，优先测高后设
max-height：先getBoundingClientRect().height，再设style.maxHeight = height + 'px'，最后加过渡 - 用
checkbox hack可免 JS 实现状态记忆（刷新后保持展开），但结构受限，适合静态菜单类场景 - 复杂嵌套或需要联动多个面板时，
<details></details>仍是最小可靠基线，其余逻辑在它之上叠加
最常被忽略的是：把 <summary></summary> 当成普通容器去塞按钮、图标、开关，结果交互断裂；或者以为加个 transition 就能平滑展开，却没意识到 max-height 的陷阱比想象中深得多。
