Bootstarp 4 入门之Collapse 折叠

Collapse

  • 触发折叠的需要 data-toggle="collapse"
  • 作为显示目标点,需要加.collapse
  • 直接打开需要 .collapse .show
  • 触发目标可以使用href 或是 data-target="(id,class)"

描述

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" 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>

带父级折叠

  • data-parent="目标", 需要附加到显示区域指定,这样能够关闭相同父级下的折叠标签元素

描述

 <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h5 class="mb-0">
                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
                            aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </button>
                </h5>
            </div>

            <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                <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" id="headingTwo">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </button>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordionExample">
                <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" id="headingThree">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                            data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Collapsible Group Item #3
                    </button>
                </h5>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordionExample">
                <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>

通过 data 属性

只需将 data-toggle="collapse"data-target 添加到元素中即可自动指定可折叠元素的控制。data-target 属性接受 CSS 选择器来应用折叠。 确保将collapse 添加到可折叠元素上。如果你希望它默认打开,可增加额外的show

通过 JavaScrip

$('.collapse').collapse()
选项名称 类型/默认值 Data 属性名称 描述
parent selector | jQuery object | DOM element false 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板(accordion)的行为类似 - 这依赖于 card class)。该属性必须在目标可折叠区域上设置。
toggle boolean true 切换调用可折叠元素。

可通过 data 属性或 JavaScript 加入选项。对于 data 属性,将选项名称附加到 data-, 如 data-parent=""

方法

  • .collapse(options)
    启用你的可折叠元素的内容,通过包含选项的 object.

  • .collapse('toggle')
    将可折叠元素切换为显示或隐藏。 在可折叠元素实际显示或隐藏之前 (即发生 shown.bs.collapse 或 hidden.bs.collapse 事件之前)返回到调用者

  • .collapse('show')
    显示可折叠的元素。 在可折叠元素实际显示之前 (即在 shown.bs.collapse 事件发生之前)返回到调用者。

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

  • .collapse('dispose')
    销毁一个元素的折叠。

回调事件

Event Type Description
show.bs.collapse 在调用 show 方法后触发该事件。
shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。