原生 <details> 和 <summary> 可实现语义化、无障碍折叠菜单，但 <summary> 必须是 <details> 的首个直接子元素；添加 open 属性可默认展开；样式定制应清除原生箭头并用伪元素控制图标；手风琴效果需 JS 监听 toggle 事件实现单开。
直接用 <details> 和 <summary> 就能实现原生折叠菜单，不用写 JavaScript，语义清晰、键盘可用、屏幕阅读器友好。
基础结构必须严格
<summary> 必须是 <details> 的第一个**直接子元素**，中间不能有空格、换行、注释或包裹容器。否则 Safari 可能完全不响应点击，其他浏览器也可能行为异常。
- ✅ 正确：
<details><summary>菜单项</summary><nav>链接1</nav></details> - ❌ 错误：
<details><div><summary>菜单项</summary></div><nav>...</nav></details>（summary 不是直接子元素） - ❌ 错误：
<details><p>说明</p><summary>菜单项</summary></details>（summary 不是首个子元素）
默认展开与初始状态控制
加 open 属性让菜单一打开页面就展开：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<details open><summary>主菜单</summary><nav>…</nav></details>- 注意：
open是布尔属性，只写open即可，不要写open="true"或open="false" - JS 中切换状态要用
element.toggleAttribute('open')，而不是赋值element.open = false（后者只影响初始渲染）
样式定制：替换箭头+保持可访问性
浏览器默认箭头在 Safari 中难以控制，推荐用伪元素统一处理：
立即学习“前端免费学习笔记（深入）”；
- 先清除原生标记：
summary { list-style: none; } - 加自定义图标：
summary::before { content: "▶"; margin-right: 6px; transition: transform 0.2s; } - 展开时旋转：
details[open] > summary::before { content: "▼"; transform: rotate(0deg); } - 别给
summary设display: block或flex，避免热区错位或图标偏移
手风琴效果（单开一栏）需 JS 配合
原生不支持自动收起其他项，但只需监听 toggle 事件即可：
- 用
toggle事件（不是click），它在状态真正变更后触发，兼容键盘和脚本操作 - 示例逻辑：当前展开时，遍历所有兄弟
<details>，移除它们的open属性 - 注意：
toggle不冒泡，需对每个元素单独绑定，或用事件委托配合closest()
