是唯一原生支持折叠/展开且语义正确、键盘可访问的HTML元素，无需JS即可实现；需确保为首个子元素，用open属性控制默认状态，样式定制应避开::marker而改用::before伪元素，互斥手风琴效果需JS监听toggle事件处理。

<details></details> 是唯一能不写 JS 就实现语义正确、键盘可访问、屏幕阅读器友好的折叠按钮的原生方案。其他所有“按钮式”做法（比如用 <button></button> + JS 切换 display）都会破坏可访问性，且在 Safari 或 WebView 中容易失效。

为什么<details></details>点不动？常见结构错误

不是浏览器不支持，而是 DOM 结构被悄悄破坏了：

• <summary></summary> 必须是 <details></details> 的第一个子元素——中间插个 <div>、注释、甚至空格都会让点击失效 <li>别把 <code><summary></summary> 当成普通按钮加 onclick 或手动设 display: none，这会绕过浏览器原生折叠逻辑
• 嵌套另一个 <details></details> 在部分 Safari 版本中不响应，多级菜单建议改用 JS + classList

自定义箭头图标和展开动画的可靠写法

原生 ::marker 在 Safari 中不可靠，强行覆盖会失效。必须用 ::before 替代：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 先隐藏默认箭头：summary { list-style: none; }
• 插入自定义图标：summary::before { content: "▶"; transition: transform 0.2s; }
• 展开时旋转：details[open] summary::before { transform: rotate(90deg); }
• 别给 <details></details> 设 height 过渡——它会压垮内部布局；需要高度动画就得切到 JS + max-height 方案

需要“一键展开全部”或记忆状态怎么办

纯 CSS 无法持久化状态，但也不必全靠 JS：

立即学习“前端免费学习笔记（深入）”；

• 用 <input type="checkbox"> + :checked ~ .item 可实现“全局折叠/展开”，状态刷新不丢失（前提是 input 放 DOM 最前，且紧邻所有目标元素）
• 若需 URL 参数控制初始展开（如 ?faq=3），才值得用 JS 调用 el.setAttribute('open', '') —— 注意 Safari 15.4 前不认 el.open = true
• 微信/QQ 内置 WebView（尤其安卓旧版）可能完全忽略 open 属性，真机测试不能跳过

最易被忽略的点：折叠后仍能被 Tab 键聚焦的元素，必须同步设 tabindex="-1" 和 aria-hidden="true"，否则对键盘和屏幕阅读器用户就是障碍。