Collapse（折叠） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目錄搜尋

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

文字

Collapse（折叠）

使用几个类和我们的 JavaScript 插件来切换项目内容的可见性。

示例

点击下面的按钮，通过班级变更显示和隐藏另一个元素：

.collapse 隐藏内容

.collapsing 在转换期间应用

.collapse.show 显示内容

您可以使用具有href属性的链接，或具有data-target属性的按钮。在这两种情况下，data-toggle="collapse"都是必需的。

<p>  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href  </a>  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target  </button></p><div class="collapse" id="collapseExample">  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.  </div></div>

多个目标

一个人<button>或者<a>可以通过在其href或data-target属性中使用JQuery选择器引用它们来显示和隐藏多个元素。多个<button>或<a>可以显示和隐藏元素，如果他们每个引用它们href或data-target属性

<p>  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p><div class="row">  <div class="col">    <div class="collapse multi-collapse" id="multiCollapseExample1">      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.      </div>    </div>  </div>  <div class="col">    <div class="collapse multi-collapse" id="multiCollapseExample2">      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.      </div>    </div>  </div></div>

Accordion的示例

使用卡组件，您可以扩展默认折叠行为以创建提一个 accordion。

<div id="accordion" role="tablist">  <div class="card">    <div class="card-header" role="tab" id="headingOne">      <h5 class="mb-0">        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1        </a>      </h5>    </div>    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      </div>    </div>  </div>  <div class="card">    <div class="card-header" role="tab" id="headingTwo">      <h5 class="mb-0">        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2        </a>      </h5>    </div>    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      </div>    </div>  </div>  <div class="card">    <div class="card-header" role="tab" id="headingThree">      <h5 class="mb-0">        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3        </a>      </h5>    </div>    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.      </div>    </div>  </div></div>

您还可以使用自定义标记创建 accordion。添加data-children属性并指定一组切换（例如.item）的同级元素。然后，使用与上面所示相同的属性和类将切换连接到关联的内容。

<div id="exampleAccordion" data-children=".item">  <div class="item">    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">
      Toggle item    </a>    <div id="exampleAccordion1" class="collapse show" role="tabpanel">      <p class="mb-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.      </p>    </div>  </div>  <div class="item">    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">
      Toggle item 2    </a>    <div id="exampleAccordion2" class="collapse" role="tabpanel">      <p class="mb-3">
        Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.      </p>    </div>  </div></div>

无障碍

一定要添加aria-expanded到控制元素。该属性明确地传达了与控件绑定的可折叠元素的当前状态，以屏幕阅读器和类似的辅助技术。如果可折叠元素默认关闭，则控件元素上的属性值应为aria-expanded="false"。如果您已将折叠元素设置为默认使用show该类打开，请aria-expanded="true"改为在控件上设置。该插件将根据是否已打开或关闭可折叠元素（通过 JavaScript，或因为用户触发了另一个绑定到同一 collapsbile 元素的控件元素）而自动在控件上切换此属性。

此外，如果控件元素的目标是单个可折叠元素 - 即data-target属性指向id选择器 - 您可以向控件aria-controls元素添加一个附加属性，其中包含id可折叠元素的属性。现代屏幕阅读器和类似的辅助技术利用该属性为用户提供了直接导航到可折叠元素本身的附加快捷方式。

用法

崩溃插件利用几个类来处理繁重的工作：

.collapse 隐藏内容

.collapse.show 显示内容

.collapsing 在转换开始时添加，并在完成时删除

这些类可以在_transitions.scss中找到。

通过数据属性

只需添加data-toggle="collapse"和一个data-target元素即可自动分配一个或多个可折叠元素的控件。data-target属性接受一个 CSS 选择器来应用折叠。确保将该类添加collapse到可折叠元素。如果您希望默认打开，请添加其他类show。

要将类 accordion 式组管理添加到可折叠区域，请添加数据属性data-parent="#selector"。请参阅演示以查看这一行动。

通过 JavaScript

手动启用：

$('.collapse').collapse()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，请将选项名称附加到data-中，如在data-parent=""。

Name	类型	默认	描述
parent	选择器\| jQuery对象\| DOM元素	假	如果提供了父项，则在显示此可折叠项目时，指定父项下的所有可折叠元素将被关闭。（类似于传统的手风琴行为 - 这取决于卡类）。该属性必须在目标可折叠区域上设置。
toggle	布尔	真	在调用时切换可折叠元素

方法

异步方法和转换

所有 API 方法都是异步的并开始转换。一旦转换开始但在结束之前，它们就立即返回给调用者。另外，对转换组件的方法调用将被忽略。

查看我们的 JavaScript 文档以获取更多信息。

`.collapse(options)`

激活您的内容作为可折叠的元素。接受可选的选项object。

$('#myCollapsible').collapse({
  toggle: false})

`.collapse('toggle')`

切换可显示或隐藏的可折叠元素。返回到可折叠元件之前呼叫者实际上已显示或隐藏（即在之前shown.bs.collapse或hidden.bs.collapse事件发生时）。

`.collapse('show')`

显示可折叠的元素。在可折叠元素实际显示之前（即shown.bs.collapse事件发生之前）返回给调用者。

`.collapse('hide')`

隐藏可折叠的元素。在可折叠元素实际上被隐藏之前（即在hidden.bs.collapse事件发生之前）返回给调用者。

`.collapse('dispose')`

销毁元素的崩溃。

活动

Bootstrap 的折叠类暴露了一些挂钩到折叠功能的事件。

事件类型	描述
show.bs.collapse	当show instance方法被调用时，此事件立即触发。
shown.bs.collapse	当用户看到折叠元素时会触发此事件（将等待CSS转换完成）。
hide.bs.collapse	当隐藏方法被调用时，立即触发此事件。
hidden.bs.collapse	当用户隐藏了一个折叠元素时会触发此事件（将等待CSS转换完成）。

$('#myCollapsible').on('hidden.bs.collapse', function () {  // do something…})