手风琴Accordion
需要对照两段 FAQ 时，为什么不能一起打开？
手风琴由多组可操作标题与可展开内容组成，用户按需查看一个或多个面板。是否互斥、能否全部收起、如何保存输入，都是需要明确的设计选择，不由名称自动决定。
把几组说明排成一列，想看哪组就展开哪组。是否只能看一组，要看任务，而不是机械照搬某个组件默认值。
翻阅多份说明书时，你有时只看一份，有时需要两份并排核对。
类比到这里为止：手风琴依旧在页面流里展开，不能替代大范围内容检索、独立页面或需要持续对照的完整表格。
样品、包装和定制 FAQ 允许多项展开，方便采购商比较条件；办理某个分步操作时则可以另行约定单项展开。
决定展开规则
- 多项模式
- 每组独立展开，便于并排或连续对照。
- 单项模式
- 打开一项会收起另一项，需符合任务预期。
- 输入保留
- 切换面板是否卸载或清空内容，不能无提示丢失填写。
标题不是装饰文字
自定义手风琴标题需要明确按钮行为与合适的标题层级，让键盘和辅助阅读知道它控制哪一组。只有点击区域变大，不代表语义完整。
下方演示允许两项同时展开，不改变页面地址，也不会自动标记课程完成。它展示的是阅读方式，不是任务完成状态。
需要对照两段 FAQ 时，为什么不能一起打开？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
手风琴 在项目中负责什么
- 什么时候用
- 多个相对独立的说明有清楚标题，用户可按需选择阅读时。
- 它解决什么
- 提供结构清楚的问答或分组内容，不让不相关的长段落同时占满视线。
- 它不负责什么
- 内容越重要越不应单靠隐藏来安排。标题可聚焦，展开状态可读取，长内容有足够阅读空间。
- 放进真实项目
- FAQ 用手风琴展示 MOQ、交期、样品和定制说明，同时保留键盘操作。
手风琴要用标题预告内容，并明确单开还是多开规则
外贸 FAQ 有 MOQ、样品、定制和交期，用户应快速扫问题并展开需要的答案，不必逐段阅读。
- 01
用可独立理解的问题做标题。
- 02
选择符合比较任务的展开规则。
- 03
支持键盘、深链接和打印展开。
多组折叠，展开规则服从阅读任务。
容易混淆的地方
标签页通常一次看一个并列面板，手风琴在标题下就地展开；折叠面板是更一般的单组模式。
FAQ 希望客户同时对照样品与包装说明。手风琴是否只能打开一项？
你可以这样告诉 AI Agent
我在处理这件事：FAQ 用手风琴展示 MOQ、交期、样品和定制说明，同时保留键盘操作。请以“手风琴”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践