用 details + summary 可原生实现折叠展开，无需 JS 或 CSS 动画；默认收起，点击 summary 自动切换，支持键盘与读屏，现代浏览器全兼容。
用 details + summary 最简实现折叠展开
原生 HTML 就有现成方案，不需要 JS 或 CSS 动画也能做。关键是别手痒去写 display: none 切换——语义不对、无障碍不友好、移动端点不灵。
直接用 details 标签包裹内容，summary 作为折叠标题：
<details><summary>品牌介绍（点击展开）</summary><p>我们成立于2010年……（超长文案）</p> </details>
-
details默认收起，用户点击summary自动展开/收起 - 支持键盘
Enter和Space触发，读屏软件能识别状态（如“已折叠”） - 所有现代浏览器都支持（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）
- 不用写一行 JS，也不用监听 click 或维护 open 状态
怎么自定义样式又不破坏可访问性
默认样式丑？可以改，但有两个硬约束：summary 必须保持可聚焦、不能删掉 details[open] 的状态标识，否则屏幕阅读器就懵了。
- 用
summary::marker改箭头（比如换成「▶」或「▼」），别用伪元素覆盖整个 summary - 加过渡动画要用
details[open] > *配合max-height+overflow，而不是直接对details做height动画（它不支持动画） - 移动端点不到？检查有没有
pointer-events: none或父层z-index遮挡 ——summary必须是可点击的最上层元素
遇到 details 不生效的常见原因
不是所有“看起来像折叠”的场景都适合它。下面这些情况会直接让 details 失效或体验变差：
- 内容里有
form、video、iframe等交互元素？details展开时它们可能不触发加载或失焦 —— 这时得用 JS 控制，但要手动补aria-expanded和aria-controls - 需要默认展开？加
open属性就行： - 旧版 Safari（iOS 10.3 之前）不支持？用
@supports (display: details)做渐进增强，降级为静态文案或 JS 方案 - SEO 担心收起内容不被收录？放心，
details里的内容始终在 DOM 中，搜索引擎能抓取
要不要用 JS 实现？看这三点再决定
除非你明确需要以下某一点，否则真没必要动 JS：
- 需要滚动到展开区域顶部（
details不自动 scroll） - 要和 URL hash 同步（比如
#brand直接展开） - 必须兼容 IE 或 Android 4.x WebView（它们完全不支持
details）
如果真要 JS 版，别自己从零写 show/hide，优先用 Element.toggleAttribute('open') 模拟原生行为，并同步更新 aria-expanded —— 否则键盘用户和读屏器就卡住了。
复杂点往往不在折叠逻辑本身，而在怎么让「展开后的内容高度可预测」：比如含异步图片、字体加载、动态行高时，max-height 动画容易错位。这时候宁可放弃动画，保功能和语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
