坍方

收合-Bootstrap 5和Material Design 2.0组件

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

注意:阅读 API 标签以找到所有可用选项,然后 高级定制

这个怎么运作

折叠JavaScript插件用于显示和隐藏内容。使用按钮或锚点 作为映射到特定元素的触发器。折叠一个元素会 将 height 的动画值从当前值设置为 0 。鉴于CSS 处理动画,则不能在 .collapse 元素上使用 padding 。 而是将类用作独立的包装元素。


基本例子

单击下面的按钮以通过类更改显示和隐藏另一个元素:

  • .collapse 隐藏内容
  • 在过渡期间应用 .collapsing
  • .collapse.show 显示内容

您可以使用带有 href 属性的链接,也可以将按钮与 data-mdb-target 属性。在这两种情况下, data-mdb-toggle =“折叠” 是必需的。

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.

          <!-- Buttons trigger collapse -->
          <a
            class="btn btn-primary"
            data-mdb-toggle="collapse"
            href="#collapseExample"
            role="button"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Link with href
          </a>
          <button
            class="btn btn-primary"
            type="button"
            data-mdb-toggle="collapse"
            data-mdb-target="#collapseExample"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Button with data-mdb-target
          </button>

          <!-- Collapsed content -->
          <div class="collapse mt-3" id="collapseExample">
            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>
        

多个目标

一种&lt; button&gt; &lt; a&gt; 可以通过以下方式显示和隐藏多个元素 在其 href 中使用选择器引用它们,或者 data-mdb-target 属性。多个&lt; button&gt; &lt; a&gt; 可以显示和隐藏元素,如果它们各自使用其元素引用 href data-mdb-target 属性

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.
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.

          <!-- Buttons trigger collapse -->
          <a
            class="btn btn-primary"
            data-mdb-toggle="collapse"
            href="#multiCollapseExample1"
            role="button"
            aria-expanded="false"
            aria-controls="multiCollapseExample1"
          >
            Toggle first element
          </a>
          <button
            class="btn btn-primary"
            type="button"
            data-mdb-toggle="collapse"
            data-mdb-target="#multiCollapseExample2"
            aria-expanded="false"
            aria-controls="multiCollapseExample2"
          >
            Toggle second element
          </button>
          <button
            class="btn btn-primary"
            type="button"
            data-mdb-toggle="collapse"
            data-mdb-target=".multi-collapse"
            aria-expanded="false"
            aria-controls="multiCollapseExample1 multiCollapseExample2"
          >
            Toggle both elements
          </button>

          <!-- Collapsed content -->
          <div class="row">
            <div class="col">
              <div class="collapse multi-collapse mt-3" id="multiCollapseExample1">
                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 class="col">
              <div class="collapse multi-collapse mt-3" id="multiCollapseExample2">
                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>
        

带滚动

添加具有指定高度的自定义样式以使用滚动条查看内容。

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. 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. 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.

          <!-- Button triggers collapse -->
          <a
            class="btn btn-primary"
            data-mdb-toggle="collapse"
            href="#collapseWithScrollbar"
            role="button"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Longer content
          </a>

          <!-- Collapsed content -->
          <div class="collapse mt-3 scroll-section" id="collapseWithScrollbar"  style="max-width: 500px">
            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. 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. 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.
          </div>
        

          .scroll-section {
            max-height: 100px;
            overflow-y: auto;
          }
        

辅助功能

确保将 aria-expanded 添加到控件元素。该属性明确 将与控件关联的可折叠元素的当前状态传达给屏幕阅读器,并 类似的辅助技术。如果可折叠元素默认为关闭,则该属性 控制元素上的值应为 aria-expanded="false". 如果你有 使用 show 类将可折叠元素默认设置为打开, aria-expanded="true" 在控件上。插件将自动切换 控件上的此属性基于可折叠元素是否已打开 或关闭(通过JavaScript,或由于用户触发了另一个与 相同的可折叠元素)。如果控件元素的HTML元素不是按钮(例如, <a> 要么 <div>), 属性 role="button" 应该添加到元素中。

如果您的控制元素定位到单个可折叠元素,即 data-mdb-target 属性指向 id 选择器–您应该 将 aria-controls 属性添加到控件元素,其中包含 可折叠元素的 id 。现代屏幕阅读器和类似辅助工具 技术利用此属性为用户提供其他导航快捷方式 直接指向可折叠元素本身。

请注意,Bootstrap的当前实现并未涵盖各种键盘交互 在中描述 WAI-ARIA Authoring Practices 1.1 accordion pattern - you will need to include these yourself with custom JavaScript.

坍方 - API


用法

折叠插件利用一些类来处理繁重的工作:

  • .collapse hides the content
  • .collapse.show shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

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

通过数据属性

只需添加 data-mdb-toggle="collapse" 和一个 data-mdb-target 元素以自动分配对一个或多个可折叠元素的控制。的 data-mdb-target 属性接受CSS选择器来应用折叠。是 确保将 collapse 类添加到可折叠元素中。如果您愿意 默认打开,添加其他类 show

要将类似手风琴的组管理添加到可折叠区域,请添加data属性 data-mdb-parent="#selector".请参阅该演示以查看实际操作。


          <button
            class="btn btn-primary"
            type="button"
            data-mdb-toggle="collapse"
            data-mdb-target="#collapseExample"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Button with data-mdb-target
          </button>

          <!-- Collapsed content -->
          <div class="collapse mt-3" id="collapseExample">
            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>
        

通过JavaScript

手动启用:


          const collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
          const collapseList = collapseElementList.map((collapseEl) => {
            return new mdb.Collapse(collapseEl)
          })
        

选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-,如data-mdb-parent="".

Name Type Default Description
parent selector | jQuery object | DOM element false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle boolean true Toggles the collapsible element on invocation

方法

异步方法和转换:
所有API方法都是异步并开始过渡。 转换开始后,他们会立即返回给呼叫者,但 在结束之前。另外,在 转换组件将被忽略

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

您可以使用构造函数创建折叠实例,例如:

Method Description
toggle Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
show Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).
hide Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).
dispose Destroys an element's collapse.
getInstance Static method which allows you to get the collapse instance associated with a DOM element.

          const myCollapse = document.getElementById('myCollapse')
          const bsCollapse = new mdb.Collapse(myCollapse)
          bsCollapse.show()
        

大事记

Bootstrap崩溃类公开了一些事件,可以挂接到崩溃功能中。

Event type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

          const myCollapsible = document.getElementById('myCollapsible')
          myCollapsible.addEventListener('hidden.bs.collapse', () => {
            // do something...
          })
        

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Collapse } from 'mdb-ui-kit';