最快实现原生手风琴无需JavaScript，直接用HTML5的和标签，兼容Chrome 12+、Firefox 49+、Safari 6+、Edge 79+及主流移动端；必须为首个子元素，支持键盘操作与屏幕阅读器，加open属性可默认展开。
用 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属性可默认展开：<details open></details> - 不能嵌套多个
summary，也不支持多级折叠（单层有效） - 部分旧版 Safari 对 CSS 样式支持较弱，比如
summary::marker需要额外重置
用 JavaScript 控制多个面板的互斥展开（单选模式）
原生 details 默认各自独立，点开一个不影响其他。如果需要“一次只开一个”，就得手动干预。
关键思路：监听所有 details 的 toggle 事件，当某个打开时，把其他已打开的设为 open = false：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
document.querySelectorAll('details').forEach(panel => {
panel.addEventListener('toggle', () => {
if (panel.open) {
document.querySelectorAll('details:not(:target)').forEach(other => {
if (other !== panel) other.open = false;
});
}
});
});
容易踩的坑：
- 别用
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）
如果真要加展开收起动画，建议换方案：用 div 包裹内容，通过 aria-expanded + max-height 过渡，同时保持语义和可访问性。
为什么不用纯 CSS 的 :checked + hidden 方案？
有人用隐藏 checkbox + :checked ~ .content 实现手风琴，看似无 JS，但实际问题不少：
- 无法用键盘（Tab + Space）正确操作，可访问性差，屏幕阅读器识别困难
- checkbox 本身不可见，又没做
aria-hidden或visually-hidden处理，反而干扰辅助技术 - 无法响应浏览器后退/前进时的状态恢复（
details[open]是历史状态感知的） - 移动端点击区域小，且 iOS 上
:checked切换有时延迟或失效
除非项目明确禁用 JS 且接受降级体验，否则不推荐。
复杂点在于：原生 details 看似简单，但想兼顾动画、互斥、可访问性和语义，往往得在“纯原生”和“可控增强”之间做取舍。最容易被忽略的是键盘操作测试——光鼠标点开不算完成，Tab 进入、Space 切换、Enter 触发，都得走一遍。
