HTML编辑器怎么制作折叠面板？Details标签使用技巧-html教程-PHP中文网

details 是 html 原生语义标签，无需编辑器插件即可实现用户侧折叠面板；summary 必须为 details 的首个子元素，否则点击无效；原生不支持 css 过渡，需用 max-height + js 实现动画；旧浏览器需降级为 js 手动控制。

html编辑器怎么制作折叠面板？details标签使用技巧

details 标签不是编辑器功能，而是 HTML 原生语义标签——它本身不依赖编辑器，但你在任何 HTML 编辑器（VS Code、WebStorm、甚至记事本）里写对结构，就能跑通折叠面板。

为什么直接写 `details` 比在编辑器里找“折叠插件”更靠谱

很多编辑器（如 VS Code）的“代码折叠”功能只作用于源码层级（比如折叠 script 块或注释），和页面运行时的用户交互完全无关。用户看到的折叠面板，是浏览器渲染后的行为，必须靠 HTML 结构驱动。

编辑器里的折叠是给开发者看的，details 折叠是给用户用的
你写 <details><summary>标题</summary>内容</details>，保存后刷新页面，立刻生效
不需要安装插件、不依赖编辑器版本、不增加构建步骤

`summary` 必须是 `details` 的第一个子元素，否则点击无效

这是最常翻车的点：把 summary 包在 div 里、前面加了空格或换行、或者用 span 套了一层，都会导致点击无响应。

✅ 正确：<details><summary>标题</summary><p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>
❌ 错误：<details><div><summary>标题</summary></div> <p>内容</p></details>
❌ 错误：<details>↵ <summary>标题</summary><p>内容</p></details>（首行缩进不影响，但换行+空格可能被解析为文本节点）
检查方法：打开 DevTools，看 summary 是否紧贴 details 开始标签，中间无其他节点

想加展开动画？别碰 `height` 或 `display`，改用 `max-height` + JS

details 原生不支持 CSS 过渡动画。强行写 details[open] { height: auto; transition: height 0.3s; } 会失效，因为 auto 无法参与过渡计算。

可行方案：监听 toggle 事件，用 JS 测量 scrollHeight，再设置 max-height
示例逻辑：el.addEventListener('toggle', () => { el.style.maxHeight = el.open ? el.scrollHeight + 'px' : '0'; });
注意：收起后要重置 max-height 为 0，否则内容仍可能撑开布局
如果内容高度固定（比如只有 2 行文字），可直接设 max-height: 50px，纯 CSS 实现

编辑器里预览时看不到效果？先确认浏览器兼容性

VS Code 内置的 Live Server 或浏览器预览插件没问题，但如果你在旧版 Safari（≤16.4）、Android WebView（≤4.4）或 IE 里测试，details 会直接退化成普通块级容器——内容永远可见，且无交互。

现代浏览器（Chrome ≥ 12、Firefox ≥ 17、Safari ≥ 16.5、Edge ≥ 79）均支持
需要兼容旧环境？得降级：<div class="accordion"> <button>标题</button><div class="panel">内容</div> </div> + 简单 JS 控制 classList.toggle('open')
别指望编辑器自动帮你 polyfill，这事必须在 HTML/JS 层处理

真正容易被忽略的是：动态插入的 details（比如通过 innerHTML 或模板引擎渲染）不会自动绑定 toggle 事件监听器——哪怕你写了 document.addEventListener('toggle', ...)，也得手动查到新节点再 addEventListener。这点在 SPA 或 CMS 模板里特别关键。