折叠面板
Collapse
初级通用折叠面板（Collapse）是一种点击标题就能展开或收起对应内容的界面组件。它让你在同一页放下多段补充信息，又不让页面一开始显得太长，比如在订单详情里收起配送记录。
你可能会说：「我想让页面先只显示几段标题，用户点哪段，就展开那段的详细内容。」
动手看看订单详情的配送记录
订单 #2408158 月 15 日下单 · 标准配送
运输中
配送记录
3 条动态
展开配送记录
切换「展开配送记录」来模拟点击标题；也可以悬停标题、按住鼠标，或用 Tab 聚焦它，看看这些即时反馈。
收起时只保留标题和动态数量，用户知道这里有内容，但订单详情不会一下变得很长。
要点折叠面板怎样组织内容？
- 1
标题和内容成对出现
每段都有一个始终可见的标题，以及一块可展开的内容。比如后台的“计费明细”标题下面放费用项目；收起时，用户仍能从标题判断里面有什么。
- 2
展开状态决定显示范围
用户点击标题，面板就在展开和收起之间切换。多个面板可以允许同时展开，也可以限定一次只开一个；你和 AI Agent 说需求时，最好把这点讲明白。
- 3
标题本身就是操作入口
因为标题要能被点击，它不只是装饰文字。实现时让键盘用户也能操作，并让辅助技术获知当前是展开还是收起，这样用户才不会只能靠画面猜状态。
容易混淆的地方
折叠面板和标签页都能减少同一时刻显示的内容，但标签页用于在几组并列内容之间切换，折叠面板更适合沿着页面逐段查看补充信息。抽屉则是从页面边缘打开一块独立区域；折叠面板的内容仍留在原来的位置。
什么时候用
适合用
- 做 SaaS 后台的订单详情页时，把配送记录、退款记录分别收进对应标题，方便用户按需查看。
- 做 AI 工具的任务结果页时，默认展示结论，把运行步骤或引用详情放进可展开的区块。
- 做产品帮助页时，将每个常见问题的回答放在问题标题下，让读者先浏览问题列表。
不适合用
- 用户进入页面就是为了通读一份短说明时，直接展示正文更省事，不必让他们逐段点击。
- 几个并列视图只需要一次显示一个，例如按“概览、成员、账单”切换设置内容时，用标签页更贴切。
- 用户需要去另一页完成操作时，用链接导航；折叠面板只适合在当前位置显露内容。
练一练选一个答案，看看解释
你在做一个订单详情页，客服通常先看订单状态，偶尔才查配送记录和退款记录；有时需要同时对照后两者。该怎么安排？
让 AI 帮你做复制给 AI Agent 直接用
请在订单详情页加入折叠面板：订单状态保持直接可见；配送记录和退款记录各有明确标题，默认收起，点击标题可展开或收起，并允许两段同时展开。请支持键盘操作和展开状态提示。