HTML中如何实现手风琴折叠面板-html教程-PHP中文网

最快实现原生手风琴无需JavaScript，直接用HTML5的和标签，兼容Chrome 12+、Firefox 49+、Safari 6+、Edge 79+及主流移动端；必须为首个子元素，支持键盘操作与屏幕阅读器，加open属性可默认展开。

html中如何实现手风琴折叠面板

用 `details` 和 `summary` 最快实现原生手风琴

不需要 JavaScript，HTML5 原生就支持。浏览器兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+，移动端也完全可用。

核心是把每个面板写成一个 details 元素，summary 作标题，其余内容直接放在 details 内部：

<details><summary>常见问题</summary><p>这是折叠内容，点击 summary 可展开/收起。</p>
</details>

注意点：

summary 必须是 details 的第一个子元素，否则无法触发交互
默认是收起状态；加 open 属性可默认展开：
不能嵌套多个 summary，也不支持多级折叠（单层有效）
部分旧版 Safari 对 CSS 样式支持较弱，比如 summary::marker 需要额外重置

用 JavaScript 控制多个面板的互斥展开（单选模式）

原生 details 默认各自独立，点开一个不影响其他。如果需要“一次只开一个”，就得手动干预。

关键思路：监听所有 details 的 toggle 事件，当某个打开时，把其他已打开的设为 open = false：

document.querySelectorAll('details').forEach(panel => {
  panel.addEventListener('toggle', () => {
    if (panel.open) {
      document.querySelectorAll('details:not(:target)').forEach(other => {
        if (other !== panel) other.open = false;
      });
    }
  });
});

容易踩的坑：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

别用 click 事件——details 的展开/收起不总触发 click（比如键盘空格键操作）
不要在 toggle 里直接遍历并改 open，否则可能触发自身再次 toggle，造成循环
若页面动态插入新 details，需重新绑定事件或用事件委托

用 CSS 自定义样式时必须覆盖的几个关键点

原生 details 有默认箭头和内边距，不重置会显得突兀。

最常需要处理的样式：

去掉默认 marker：summary::marker { content: "" }
清除默认 padding 和 margin：details, summary { margin: 0; padding: 0; }
让 summary 表现为块级可点击区域：summary { display: list-item; } 或更稳妥地用 display: block;
控制展开/收起动画：CSS 不支持直接过渡 open 状态，但可用 max-height + overflow 模拟（此时需放弃原生 details，改用 div + JS）