HTML怎么做折叠面板_html手风琴折叠面板实现方法【实战】-html教程-PHP中文网

原生HTML无内置手风琴组件，但可用实现轻量语义化单折叠项；多组互斥需JS监听toggle事件关闭兄弟节点；加动画需用max-height模拟并手动处理可访问性。

html怎么做折叠面板_html手风琴折叠面板实现方法【实战】

原生 HTML 没有 <accordion></accordion> 或 <details></details> 以外的内置折叠面板组件，但用 <details></details> + <summary></summary> 就能快速实现轻量、语义化、无需 JS 的手风琴效果——前提是不需要多开/同步收起/动画过渡等高级交互。

用 `<details></details>` 实现单个可折叠区块

<details></details> 是 HTML5 原生标签，浏览器默认支持展开/收起，自带 ARIA 语义和键盘可访问性（空格/回车触发）。它天然适合单个折叠项：

<details><summary>点击展开说明</summary><p>这里是被折叠的内容，可以是任意 HTML 元素。</p>
</details>

默认收起，open 属性可设为默认展开：<details open></details>
<summary></summary> 必须是 <details></details> 的第一个子元素，否则不生效
Chrome/Firefox/Edge 支持良好；Safari 15.4+ 才修复了部分 focus 样式 bug
无法用 CSS 直接控制展开时的 height 过渡动画（height: auto 不支持 transition）

多个 `<details></details>` 组成手风琴（互斥展开）

原生 <details></details> 默认各自独立，要实现“点一个、其他自动收起”的手风琴效果，必须加少量 JS。核心逻辑是：监听所有 <details></details> 的 toggle 事件，遍历兄弟节点并关闭它们。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

document.querySelectorAll('details').forEach(details => {
  details.addEventListener('toggle', () => {
    if (details.open) {
      document.querySelectorAll('details').forEach(d => {
        if (d !== details) d.open = false;
      });
    }
  });
});

注意只在 details.open === true 时才执行关闭逻辑，避免收起时误触发
不要用 click 事件替代 toggle：用户用键盘（空格/回车）操作时不会触发 click
如果页面动态插入新 <details></details>，需重新绑定或使用事件委托

需要平滑高度动画？用 CSS + JS 模拟

想让内容展开时有 height 过渡效果，得绕过 <details></details> 的限制，改用 max-height + transition。关键点是：不能直接 transition height: auto，所以要用足够大的固定 max-height 值作为代理。

<div class="accordion-item">
  <button class="accordion-header">标题</button>
  <div class="accordion-content">内容...</div>
</div>

CSS 中设置：

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion-item.active .accordion-content {
  max-height: 300px; /* 需大于内容实际高度 */
  padding: 1rem 0;
}

max-height 值必须显式设为大于内容最大可能高度的固定值（如 300px），否则过渡无效
若内容高度差异大，可 JS 动态读取 scrollHeight 并赋值给 max-height，但要注意 transition 时机（需在 class 切换后下一帧再设置）
这种方案完全脱离原生 <details></details>，需手动处理键盘支持（Enter/Space 触发、aria-expanded 同步）