HTML手风琴菜单可用原生details和summary元素实现，语义清晰、可访问性好、无需JS即可折叠展开；需注意summary必须为details首个子元素、用open属性控制默认展开、通过max-height+transition模拟动画，互斥效果须JS监听toggle事件实现。
HTML 手风琴菜单怎么用 details 和 summary 实现
现代 HTML 原生就支持折叠展开，不用 JS 也能做手风琴效果——关键就是 details 和 summary 元素。它们语义清晰、可访问性好、默认带过渡（需 CSS 补一点），且在 Chrome/Firefox/Safari/Edge 中已全面支持（IE 不支持）。
常见错误是把 summary 当成普通按钮硬加 onclick，结果破坏语义和键盘导航；或者忘了 details 默认是关闭的，没加 open 属性却期望默认展开。
-
summary必须是details的第一个子元素，否则不生效 - 想默认展开？直接加
open属性： - 点击
summary文本或其右侧小箭头都会触发切换，无需额外事件绑定 - 内容区域自动参与流式布局，不需要设置
height: 0或overflow: hidden
怎么用 CSS 控制手风琴样式和展开动画
原生 details 没有展开收起的过渡动画，但可以用 max-height + transition 模拟，或者更稳妥地用 animate 配合 :has()（仅支持较新浏览器）。实际项目中推荐渐进增强：先保证无 JS 可用，再加平滑动画。
容易踩的坑是给 details 直接设 height: 0 ——这会压垮内部内容流，导致布局错乱；正确做法是对 details[open] summary ~ * 设置 max-height 并过渡。
立即学习“前端免费学习笔记（深入）”；
- 隐藏默认箭头：
summary::marker { content: "" }（注意 Safari 需要list-style: none） - 添加向下箭头图标：
summary::after { content: "▼"; margin-left: 4px; }，再用details[open] summary::after { transform: rotate(180deg) } - 动画兼容性方案：用
@keyframes slideDown+animate，配合details[open]触发（避免依赖 JS）
多个手风琴项如何互斥（单选折叠）需要 JS 吗
原生 details 是各自独立的，没有“一次只开一个”的机制。如果要做手风琴互斥行为，必须用 JS 监听 toggle 事件并手动关闭其他项。
别用 click，要用 toggle——这是 details 元素专属事件，能准确捕获展开/收起状态变化，包括键盘空格键触发的情况。
- 监听方式：
document.querySelectorAll('details').forEach(el => el.addEventListener('toggle', handler)) - 判断是否刚打开：
if (el.open)，然后遍历其他details并设otherEl.open = false - 注意避免重复触发：不要在 handler 里再次调用
el.open = true，否则可能死循环 - 如果页面内容动态加载，记得对新增的
details也绑定事件
移动端点击无响应或无法收起？检查这些点
在 iOS Safari 或部分安卓 WebView 中，details 行为可能异常，比如点一次没反应、点两次才生效，或收起后内容残留空白。根本原因常是 CSS 干扰或事件冒泡。
最常被忽略的是 summary 内部嵌套了 div 或设置了 pointer-events: none，导致点击穿透失效；还有人给 summary 加了 display: block 却忘了它原本是 display: list-item，破坏了 marker 渲染逻辑。
- 确保
summary直接包裹文本，或只含内联元素（span、strong等） - 移除所有对
summary的touch-action: manipulation或-webkit-tap-highlight-color覆盖 - 测试真机：iOS 15.4+ 已修复大部分 toggle 事件延迟问题，但旧版仍建议加
cursor: pointer提示可点击 - 若用框架（如 Vue/React）动态渲染，确保
details元素没被框架指令意外销毁或重建
手风琴菜单真正的复杂点不在实现，而在边界场景：键盘用户按 Enter 切换、屏幕阅读器播报状态、服务端渲染时首屏是否展开、以及 Safari 下 :has(details[open]) 的兼容性兜底。这些细节不处理，看起来“能用”，实则漏掉大量真实用户。
