details 标签是 html 中实现折叠面板最直接、语义正确且兼容性最佳的原生方案，无需 js 即支持键盘操作与屏幕阅读器；需搭配 summary 使用，注意 safari 兼容性、样式限制及嵌套风险。

details 标签是 HTML 模板里实现折叠面板最直接、语义最正确、兼容性最好的方案，不需要额外 JS 就能工作，且天然支持键盘操作和屏幕阅读器。

用 details + summary 快速搭建模板折叠结构

在 HTML 模板中插入折叠面板，首选原生组合：details 作为容器，summary 作为唯一可点击标题（且必须是第一个子元素）。浏览器自动处理展开/收起逻辑和状态切换。

• summary 内可放任意内联内容，比如文字、span、图标字体或 svg，但不能包裹块级元素（如 div）
• 若想默认展开，直接加 open 属性：<details open><summary>...</summary></details>
• 多个 details 默认互不干扰；要做手风琴（单开）效果，需监听 toggle 事件并手动关闭兄弟节点
• Safari 对 summary::marker 支持不稳定，建议统一用 summary::before 控制图标，避免样式断裂

自定义样式时绕不开的几个 CSS 限制

原生 details 的样式控制能力有限，强行覆盖容易失效。关键点在于：不要试图给 details 或 summary 设 height 过渡，也不要用 display: none/block 切换——这会破坏原生语义和可访问性。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 隐藏默认箭头：用 summary { list-style: none; } 最稳妥，比 summary::marker { content: ""; } 兼容性更好
• 添加旋转图标：用 summary::before { content: "▶"; transition: transform 0.2s; }，再配合 details[open] summary::before { transform: rotate(90deg); }
• 想加高度动画？必须放弃原生交互逻辑，改用 max-height + overflow: hidden + JS 类切换，此时已不属于纯 details 方案
• details[open] 是核心选择器，所有展开态样式都应基于它写，而不是靠 JS 动态加 class

模板中嵌套多层折叠内容的注意事项

HTML 规范不保证 details 嵌套行为一致。Chrome 和 Firefox 大致支持，但 Safari 15.4 之前会丢失子 summary 的点击响应，部分旧 Edge 也会跳过内部 toggle 事件。

• 如果模板需要“章节 → 小节 → 条目”三级折叠，建议只在最外层用 details，内层改用 JS 驱动的 max-height 方案，避免不可控的兼容问题
• 动态插入的 details（比如通过 innerHTML 或模板引擎渲染），其 toggle 事件监听需在插入后手动绑定，不能依赖初始页面加载时的 querySelectorAll
• 含表单、视频或 iframe 的折叠内容，在收起时不会自动暂停或卸载，需在 toggle 事件中判断 !details.open 并手动处理（例如 iframe.contentWindow?.document?.write("")）

真正难的不是让内容“看起来”能折叠，而是让折叠后的内容仍保留在文档流中、能被键盘聚焦、不破坏 SEO 结构、且在 Safari 和旧版 Edge 里不突然失效——这些细节，往往在模板交付前最后一刻才暴露出来。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！