---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
title: '添加折叠面板 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:20+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '当需要访客一次打开一个的标题列表时使用折叠面板（也称手风琴）。它适合 FAQ、功能列表和分段阅读更好的长内容。最终得到一叠问题，点击打开答案。本例为代理 FAQ 页面构建三个问题。'
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加折叠面板
      description: '当需要访客一次打开一个的标题列表时使用折叠面板（也称手风琴）。它适合 FAQ、功能列表和分段阅读更好的长内容。最终得到一叠问题，点击打开答案。本例为代理 FAQ 页面构建三个问题。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:19:20+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/collapsibles-element'
      description: '当需要访客一次打开一个的标题列表时使用折叠面板（也称手风琴）。它适合 FAQ、功能列表和分段阅读更好的长内容。最终得到一叠问题，点击打开答案。本例为代理 FAQ 页面构建三个问题。'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 添加折叠面板.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)
- [构建 FAQ 页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [添加嵌套布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)

当需要访客一次打开一个的标题列表时使用折叠面板（也称手风琴）。它适合 FAQ、功能列表和分段阅读更好的长内容。最终得到一叠问题，点击打开答案。本例为代理 FAQ 页面构建三个问题。

## 添加折叠面板

1. 点击 **+** 在版块上并选择 **Collapse panel** 从 **Layout** 选项卡。它带一个开关到来。
2. 从其位置打开面板设置 **More** 菜单。用以下内容选择 **Collapse** 每个开关是否开始关闭。这里开启。选择 **Expand icon** 并点击 **Save**.
3. 悬停开关，打开其 **More** 菜单并选择 **Settings**。输入问题作为 **Toggle title** 并点击 **Save**.
4. 点击问题打开开关。点击 **+** 其中，选择 **Text** 并输入答案。
5. 点击 **Add toggle** 在面板控制栏上添加下一个问题。新开关落在顶部，因此先添加最后一个问题。
6. 点击 **Save** 在工具栏上。在 Preview 中点击问题检查答案是否打开。

  ## 您会看到的内容

每个问题是带所选展开图标的标题。点击在其下方打开答案，之前打开的答案关闭。当 **Collapse** 关闭，页面加载时第一个答案打开。答案关闭时仍保留在页面 HTML 中，因此搜索引擎仍能读取。

## 设置折叠面板

该 **Collapse panel** 元素有两个设置，位于 **More** > **Settings** 在其控制栏中。

| 设置 | 它的作用 | 默认值 |
|---|---|---|
| **Collapse** | 打开：每个开关开始时关闭。关闭：第一个开关开始时打开 | Off |
| **Expand icon** | 每个标题旁的图标：**None**, **+** （加号和减号）或 **﹀** （箭头） | None |

每个开关有一个设置，**Toggle title**：访客点击的问题或标题。

## 管理开关

- **Reorder**：拖拽开关 **Toggle** 在其控制栏中并将其拖到另一个上方或下方。
- **Rename**：悬停开关，打开 **More** > **Settings**，更改 **Toggle title** 并点击 **Save**.
- **Remove**：悬停开关，打开 **More** 并选择 **Delete**。其中的答案随之移动。

开关可容纳任何元素：文本、图像、按钮或带列的行。每个答案保持简短。如果答案需要单独成页，请链接到该页面。

## 如果您看不到它

- **新问题出现在顶部。** **Add toggle** 始终插入到面板顶部。拖拽开关 **Toggle** 在其控制栏中到想要的位置。
- **设置仅显示 Toggle title。** 您打开了一个开关的设置。悬停面板上边缘以便 **Collapse panel** 控制栏出现，然后打开 **More** > **Settings** 那里。
- **页面加载时第一个答案打开。** **Collapse** 关闭。在以下位置打开它 **Collapse panel** 设置以便每个答案开始时关闭。
- **折叠面板在选择器的 Layout 选项卡中缺失。** DXPR Builder 用户资料省略它。管理员勾选 **Accordion** 在 **Elements** 在您的资料中，位于 `/admin/dxpr_studio/dxpr_builder/profile`.

## 接下来做什么？

- [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)：并排而非堆叠显示相关内容。
- [常见问题页面教程](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/faq-page)：围绕折叠面板构建完整的常见问题页面。
- [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)：将行和列放入开关中。