html实现手风琴折叠面板_html accordion手风琴展开收起效果【干货】-html教程-PHP中文网

原生和是最轻量、语义准确且无障碍友好的手风琴实现方案，现代浏览器原生支持，无需 js 或 css 框架；必须为的首个子元素，用 ::marker 自定义箭头，避免破坏语义。

html实现手风琴折叠面板_html accordion手风琴展开收起效果【干货】

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

不用 JS、不引 CSS 框架，现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）直接支持。这是最轻量、语义最准、无障碍友好的方案。

常见错误是手动写 div + click 监听 + 切换 display，既重复造轮子，又漏掉键盘操作（如回车展开）、屏幕阅读器标记等关键细节。

实操建议：

<details></details> 默认收起，加 open 属性可默认展开
<summary></summary> 必须是 <details></details> 的第一个子元素，否则无效
点击 <summary></summary> 文本或其空白区域都会触发展开/收起，无需额外绑定事件
若需自定义箭头图标，用 ::marker 伪元素控制，不要用 span 套图标——会破坏语义和焦点顺序

<details><summary>常见问题</summary><p>这里是折叠内容……</p>
</details>

需要兼容 IE 或旧版 Safari？用 `aria-expanded` + `aria-controls` 手动控制

IE 完全不支持 details，旧版 Safari（details 的 open 属性变更监听不灵敏。此时必须退回到 JS 控制的 DOM 方案，但不能只改 style.display —— 那样对屏幕阅读器不可见。

关键点是正确同步 ARIA 状态：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

初始状态：面板 aria-hidden="true"，按钮 aria-expanded="false"，且 aria-controls 指向面板 ID
点击后：切换按钮的 aria-expanded，同时切换面板的 aria-hidden 和 hidden 属性（hidden 是 HTML 原生属性，比 display: none 更语义化）
务必用 addEventListener('click', ...)，别用 onclick 行内属性——不利于维护和测试

示例逻辑片段：

const btn = document.querySelector('[aria-controls="panel-1"]');
const panel = document.getElementById('panel-1');

btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  panel.setAttribute('aria-hidden', expanded);
  panel.toggleAttribute('hidden', !expanded);
});

动画过渡失效？别只设 `max-height`，要配合 `overflow` 和 `transition`

纯 CSS 动画手风琴最容易卡在“收起时内容突然消失”或“展开时高度跳变”。根本原因是 height: auto 无法参与 CSS 过渡。

解决方案是用 max-height 替代 height，但有严格前提：

面板容器必须设 overflow: hidden，否则内容会溢出
max-height 的目标值要大于内容实际高度（比如设 max-height: 500px），不能写 max-height: 0 → max-height: auto（auto 不触发过渡）
过渡必须写在面板上，而不是按钮上：transition: max-height 0.3s ease, opacity 0.2s ease
收起时，max-height 设为 0 后，需在 transitionend 后再设 display: none（如果真需要）——但更推荐全程用 hidden 属性控制可访问性