# 折叠面板 | Creght 可视化文档

> 演示说明 本教程将带你从 0 到 1 搭建一个 可点击展开 / 收起的折叠面板（FAQ）组件 ，并最终实现 可复用的组件结构 ，适用于 FAQ、帮助中心等常见场景。…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

工具/

# 折叠面板

## 演示说明

本教程将带你从 0 到 1 搭建一个 **可点击展开 / 收起的折叠面板（FAQ）组件**，并最终实现 **可复用的组件结构**，适用于 FAQ、帮助中心等常见场景。

## 第一步：创建组件

1. 选中 **item** 所在的层级
2. 鼠标右键，创建组件并命名为 `FAQItem`

如下图所示：

![image.png](https://fsu.creght.com/user/3/mmLaHiQEvfx__image.png)

## 第二步：设置组件变形（折叠 / 展开状态）

### 1\. 调整组件基础结构

- 选中最外层组件
- 将高度设置为 **自适应**

![image.png](https://fsu.creght.com/user/3/mmLaHkkUekO__image.png)

### 2\. 配置「默认」变形（折叠状态）

在默认变形下：

- 将 **“回答”文本** 和 **分割线** 的可见性设置为 **否**
- 移除根组件的背景样式

![image.png](https://fsu.creght.com/user/3/mmLaHlyUjcP__image.png)

### 3\. 添加「展开」变形

1. 新增一个组件变形

![image.png](https://fsu.creght.com/user/3/mmLaHmDIfhB__image.png)

2. 在变形 1 中：
   - 将 **“回答”文本** 和 **分割线** 的可见性设置为 **是**
   - 为组件添加一个 **浅紫色背景**

     ![image.png](https://fsu.creght.com/user/3/mmLaHnPkSRx__image.png)
3. 选中 **箭头图标**，旋转 **180°**，用于表示展开状态

![image.png](https://fsu.creght.com/user/3/mmLaHpdurmb__image.png)


## 第三步：添加交互逻辑

### 1\. 折叠 → 展开

- 在 **默认变形** 下，选中标题分组
- 点击右侧 **交互「+」**，选择 **变形**

![image.png](https://fsu.creght.com/user/3/mmLaHqnJkSz__image.png)

- 触发方式选择 **点击**
- 目标变形设置为 **变形 1**

![image.png](https://fsu.creght.com/user/3/mmLaHsMAzwq__image.png)


### 2\. 展开 → 折叠

- 在 **变形 1** 下，选中标题分组
- 调整点击交互
- 将目标变形设置为 **默认**

![image.png](https://fsu.creght.com/user/3/mmLaHtSmiHp__image.png)


## 预览效果

此时预览页面，即可看到点击标题后，内容展开 / 收起的交互效果。

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaRafmWWH__preview_02.gif)

## 如何实现高复用

### 1\. 将文案抽象为变量

### 标题文本

1. 选中标题文本组件
2. 在文本属性中点击 **「+」 → 创建变量**

![image.png](https://fsu.creght.com/user/3/mmLaHuZnoSm__image.png)


创建完成后，标题已绑定文本变量：

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaLiGyqDb__image.png)

可点击蓝色变量名，重命名为更语义化的名称（如 标题）：

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaLNdLpXQ__image.png)

### 回答文本

- 选中默认状态下的 **“回答”文本组件**
- 使用同样方式创建文本变量（如 回答）

![image.png](https://fsu.creght.com/user/3/mmLaHwCBZTS__image.png)


### 2\. 在页面中配置组件内容

1. 回到页面
2. 选中 **FAQItem** 组件
3. 在右侧组件属性区域，可以看到 **标题** 和 **回答** 两个可配置字段

![image.png](https://fsu.creght.com/user/3/mmLaHxLozKU__image.png)


修改标题后，页面内容会同步更新：

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaNadhYOU__image.png)

### 3\. 复用到其他问题项

1. 选中其他问题分组
2. 鼠标右键 → **替换为组件** → 选择 **FAQItem**

![image.png](https://fsu.creght.com/user/3/mmLaHzDSmuR__image.png)


只需修改对应的标题和回答即可：

![](https://fsu.creght.com/project/mtdDqMgsnYi/mmLaNWmamjl__image.png)

对其他问题重复相同操作即可。

## 总结

通过组件 \+ 变形 \+ 交互 \+ 文本变量：

- 你可以快速搭建一个 **可点击展开的折叠面板**
- 所有样式集中维护，内容按需配置
- 后续只需修改一次组件，页面中所有引用都会同步更新

到这里，一个 **高复用、易维护的 FAQ 折叠组件** 就完成啦 🚀

本文目录

- [演示说明](#heading-52k91stfx)
- [第一步：创建组件](#heading-cy7aslsrf)
- [第二步：设置组件变形（折叠 / 展开状态）](#heading-9665u6rl7)
- [1\. 调整组件基础结构](#heading-qehj0n1y6)
- [2\. 配置「默认」变形（折叠状态）](#heading-kgozp4eja)
- [3\. 添加「展开」变形](#heading-inp0h1d3t)
- [第三步：添加交互逻辑](#heading-nzb13b4k9)
- [1\. 折叠 → 展开](#heading-gn4foim63)
- [2\. 展开 → 折叠](#heading-np5g1c6yi)
- [预览效果](#heading-tl23fytfm)
- [如何实现高复用](#heading-gpdkmctrc)
- [1\. 将文案抽象为变量](#heading-mibu6a9dl)
- [标题文本](#heading-b0mi6hwc9)
- [回答文本](#heading-30xp96q37)
- [2\. 在页面中配置组件内容](#heading-x51ufaskt)
- [3\. 复用到其他问题项](#heading-xb9u100vq)
- [总结](#heading-jhni2s4um)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)