Details/Summary 手风琴效果生成 - 纯HTML折叠面板

<details> 和 <summary> 是 HTML5.1 规范引入的原生折叠面板元素，无需任何 JavaScript 即可实现展开/折叠功能。所有现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持。对于极少数老旧浏览器，折叠内容会直接显示，实现了优雅降级。

✅ Chrome 12+ | ✅ Firefox 49+ | ✅ Safari 6+ | ✅ Edge 79+ | ✅ 移动端全支持

给多个 <details> 元素设置相同的 name 属性值即可。这是 HTML 规范新增的特性，浏览器会自动将同 name 的 details 互斥——展开一个时自动折叠其他。

示例：<details name="accordion">

⚠️ name 属性在 Chrome 120+、Safari 17.4+、Firefox 130+ 中支持。旧版浏览器中所有面板可独立展开。

在 <details> 标签上添加 open 属性即可：<details open>。在手风琴模式下，建议只为一项设置 open，以确保行为符合预期。

多个 open 在手风琴模式下，浏览器通常只展开第一个带有 open 的项。

通过 CSS 隐藏默认箭头并自定义：

summary::-webkit-details-marker { display: none; }
summary::marker { display: none; content: ''; }
summary::after { content: '▼'; /* 自定义图标 */ }
details[open] summary::after { content: '▲'; }

折叠内容在 DOM 中始终存在，搜索引擎可以完整抓取。即使面板处于折叠状态，内容也不会被隐藏于爬虫。相比 JavaScript 驱动的折叠方案，纯 HTML 方案对 SEO 更友好——爬虫无需执行 JS 即可获取全部内容。

✅ 推荐用于 FAQ 页面、产品详情、文档目录等需要折叠展示的场景。

可以！<details> 可以嵌套另一个 <details>，实现多级折叠菜单。内层 details 的展开/折叠独立于外层，非常适合目录导航或分层内容展示。

注意嵌套时内外层 name 属性应使用不同值，避免意外的手风琴联动。