MODERN CSS
原生折叠details / summary
一个 <details> 包一个 <summary> 就是可折叠区块，天生支持键盘、天然可访问、完全零 JS。accordion 的最省事做法。
效果预览
▾交付周期是多久？
标准套餐 5 个工作日交付，加急可以缩短到 2 个工作日。交付后含 30 天免费修改。
适合用在哪
FAQ、设置项分组、需要渐进披露的长内容。多组同名 details 用 name 属性可实现手风琴（一次只开一个）。
容易踩的坑
- 在 summary 里再放按钮或链接，点击它会同时触发展开收起，交互冲突。
- 用 list-style:none 去掉标记后未补自绘图标，用户看不出这是可展开的区块。
- 把关键信息藏在默认收起的 details 里，浏览器页内搜索在部分旧版本中找不到。
设计提示词 · Prompt
原生折叠（details / summary）：<details><summary>问题？</summary><p>答案</p></details>。浏览器自动处理开合、键盘（Enter/Space）与 aria-expanded 语义，屏幕阅读器默认就能正确播报。样式要点：① summary 默认有三角形 marker，用 summary{list-style:none} 与 summary::-webkit-details-marker{display:none} 去掉后自绘图标；② 用 details[open] summary .icon{transform:rotate(180deg)} 做展开态；③ 动画难做是因为内容 display 切换 —— 想平滑展开要么用 grid-template-rows 从 0fr 到 1fr 的过渡（内容包一层 overflow:hidden 的容器），要么用 ::details-content（新特性）配 interpolate-size: allow-keywords；④ 多个 <details name="faq"> 共享 name 时自动互斥，成为手风琴。
details / summary: <details><summary>Question?</summary><p>Answer</p></details>. The browser handles open/close, keyboard (Enter/Space), and aria-expanded semantics automatically, and screen readers announce it correctly by default. Styling notes: 1) summary has a default triangle marker — remove it with summary{list-style:none} and summary::-webkit-details-marker{display:none}, then draw your own icon; 2) use details[open] summary .icon{transform:rotate(180deg)} for the expanded state; 3) animation is hard because content toggles display — for smooth expansion, either transition grid-template-rows from 0fr to 1fr (wrap the content in an overflow:hidden container), or use ::details-content (a new feature) with interpolate-size: allow-keywords; 4) multiple <details name="faq"> sharing a name become mutually exclusive automatically, forming an accordion.
常见搭配
同一页面里经常和「原生折叠」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-det">
<div class="mc-det__s"><i>▾</i>交付周期是多久？</div>
<div class="mc-det__b">标准套餐 5 个工作日交付，加急可以缩短到 2 个工作日。交付后含 30 天免费修改。</div>
</div>
</div>