为什么要把“展开更多”说清楚？

用户常对AI说“做个能展开更多内容的页面”，但“展开”的具体形式有多种：手风琴、折叠面板、树形视图、可展开行、展开全文、加载更多、可展开卡片、抽屉。不说明白具体形式，AI给出的结果很可能不是你想要的那一种。

8种常见展开方式

常见的展开方式主要有8种，下面按图文逐一说明。

手风琴 Accordion

• 适用场景：一组同级内容，如常见问题、设置分组、课程章节。
• 核心规则：点击标题后向下展开对应内容；同一组内一次只保留一个面板展开，打开新项时上一项同步收起（互斥展开）。
• 大白话描述：点击标题后向下展开Accordion；同一组一次只保留一个面板，打开新项时让上一项同步收起。

折叠面板 Collapse

• 核心要点：每个区块可独立开合，多个区块能同时保持展开，不互斥。
• 与手风琴的区别：折叠面板是独立展开，手风琴是互斥展开。

树形视图 Tree View

• 适用场景：有父子层级的内容，如文件目录、组织架构、页面结构。
• 核心规则：点击节点前的箭头，一层一层展开子级；子级向右缩进，父节点保持可见，并高亮当前路径。
• 大白话描述：内容有父子层级时，点击节点前的箭头，一层一层展开子级。

可展开行 Expandable Row

• 核心要点：表格不想塞太满时，点击某一行，在该行下方原地展开详情。
• 与抽屉的区别：可展开行是原地展开，抽屉是侧边滑入。

展开全文 Read More

• 核心要点：正文太长时先显示几行，点击后原地展开完整文字。
• 与加载更多的区别：展开全文是展开同一段文字，加载更多是追加新列表项。

加载更多 Load More

• 核心要点：列表还有后续内容时，点击一次，往当前列表后面补一批。
• 与展开全文的区别：加载更多是追加新条目，展开全文是展开同一内容。

可展开卡片 Expandable Card

• 核心要点：先用小卡片展示摘要，点击后让卡片放大，露出完整信息。
• 与抽屉的区别：可展开卡片是原地放大，抽屉是侧边滑入。

抽屉 Drawer

• 核心要点：既想保留原页面，又要查看更多详情时，面板从侧边滑入。
• 与可展开行的区别：抽屉是侧边滑入，不改变原页面布局。

选哪种？先想清楚四件事

看起来都是“展开更多”，但真正要先说清的是以下4件事：

• 内容单位：展开的是一段文字、一批列表、一条表格、一组层级，还是独立详情？
• 展开位置：从当前区块下方、表格行下、卡片内部，还是页面侧边展开？
• 空间影响：展开后是撑开原页面、追加在末尾、覆盖上层，还是从侧边挤入？
• 关闭规则：是互斥收起、独立开合、手动收起，还是点击关闭按钮？

与AI沟通的完整公式

8种展开方式知识小结