折叠面板Collapse
你可能会说
问题很多，先只显示标题，点开了再看答案。
折叠面板是可按需展开或收起一组内容的界面组件常见问题和高级设置可先显示标题，用户点开再读正文。风险提示、提交条件等必须看到的信息不应默认藏在折叠面板里。
也常被叫作可折叠面板
容易混淆？这样区分
折叠面板Collapse≠手风琴（Accordion）
折叠面板（Collapse）泛指可以展开和收起的内容；手风琴（Accordion）通常是一组折叠面板，而且经常规定一次只展开一个。
什么时候用
- FAQ 问答：问题平铺，答案默认收起如何重置密码？▾支持哪些支付方式？▸
- 把高级 / 不常用设置收起来，主界面保持清爽消息通知高级设置▸
- 内容分组很多，让用户自己决定展开哪组基础信息▸成员权限▾
- 移动端页面太长，次要信息折叠起来▸ 更多设置将次要信息收起，缩短页面长度
什么时候不用
- 风险提示和重要公告需要持续可见，不应默认放进折叠面板⚠ 账号存在风险，请立即处理▸关键提示默认折叠，用户进入页面时看不到内容
- 只有一组内容也折叠，会增加不必要的操作项目介绍▾只有一组内容时，不需要增加展开步骤
- 几组平级内容互斥切换时，使用 标签页 Tabs 更合适全部待付款已完成
- 折叠里再套折叠，父级路径被隐藏，难以定位内容一级分组▾二级分组▾三级分组…▸
组成结构 · Anatomy
如何邀请团队成员？▾进入「项目设置 → 成员」，点击“邀请成员”，输入邮箱即可。
一组可折叠内容的容器
标题行，整块可点击
指示当前是展开还是收起
展开后才看到的正文
常见变体 · Variants
手风琴Accordion
如何邀请团队成员？▾
同时只展开一个面板。
支持导出数据吗？▸
同时只想让一组展开，页面保持短
简洁无边框Ghost
如何邀请团队成员？▾
去掉边框，融进页面背景。
支持导出数据吗？▸
想弱化边界、融进页面背景时用
卡片式Card
如何邀请团队成员？▾
每个面板一张卡片。
支持导出数据吗？▸
每组内容相对独立，想强调分组
典型使用场景
常见问题 FAQ
帮助中心
如何重置登录密码？▾
进入「账号设置 → 安全」，点击「重置密码」，按邮件里的指引操作即可，全程约 1 分钟。
支持哪些支付方式？▸
如何申请开发票？▸
高级设置收纳
通知设置
消息通知
邮件周报
高级设置（免打扰时段、Webhook）▸
订单明细展开
订单 SF1024888已签收
实付 ¥329.00 · 2026-07-18 下单
商品明细（3 件）▾
机械键盘 ×1¥249.00
键帽套装 ×2¥80.00
移动端长页面
延伸阅读 · 权威出处