4.2一、Bootstrap V4自学之路-----内容---折叠板

这个功能是之后很定必须用到的功能，以前不系统学习的时候，只知其一;不知其二的拷贝它。

效果让人不是很满意。必定要把它拿下！

示例

点击下面的按钮，利用类的改变，显示或隐藏另外一个元素：

• .collapse 隐藏内容

• .collapsing 在过渡过程当中应用到

• .collapse.in 显示内容

你可使用带href属性的连接，或者使用带data-target属性的按钮。在两种状况下，data-toggle="collapse"都是必需的。

手风琴示例

扩展默认的折叠块行为，建立一个手风琴。

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        《div id="accordion" role="tablist" aria-multiselectable="true"》<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingOne"》这里面是菜单的条headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"》<br>
        --| --|《div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"》这里是headingOne的正文内容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingTwo"》这里面是菜单的条headingOne<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"》<br>
        --| --|《div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"》这里是headingTwo的正文内容。<br>
<br>
        --|《div class="panel panel-default"》<br>
        --| --|《div class="panel-heading" role="tab" id="headingThree"》这里面是菜单的条headingThree<br>
        --| --| --| 《h4 class="panel-title"》   下面的《a》是出发滚动效果的文字<br>
        --| --| --| --| 《a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"》<br>
        --| --|《div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"》这里是正文内容。
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      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 class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      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>

PS：其实我对手风琴的样式仍是很期待的。好比加个背景色啦。好在换一下 <a>标签的嵌套顺序，就能够实现点击背景触发手风琴效果。想一想这个仍是很开心。至于背景色，可能须要本身的去处理了。

易用性

确保给控件元素添加了aria-expanded属性。这个属性向屏幕阅读器明肯定义了折叠块元素的当前的状态。若是折叠块元素默认是闭合的，它必须拥有一个 aria-expanded="false"值。若是你用.in类设置折叠块元素是打开的，在控件上设置 aria-expanded="true"便可。插件会根据折叠块元素是打开仍是关闭着的，自动切换这个属性。

此外，若是控件元素只对准一个单个元素——即，data-target的值指向一个id选择器，你能够给这个控件元素添加额外的aria-controls属性，容纳这个折叠块元素的id。现代的屏幕阅读器以及相似的辅助技术利用这个属性向用户提供额外的快捷方式，以径直导航到折叠块元素自己。

用法

折叠插件使用一些类来处理折叠行为：

• .collapse 隐藏内容

• .collapse.in 显示内容

• .collapsing 在过渡开始时加上，在过渡结束时移除。

这里类能够在_animation.scss中找到。

利用data属性

只要向一个元素添加data-toggle="collapse"以及data-target属性，就能够自动让这个元素成为可折叠元素。data-target属性接受一个CSS选择器，以应用折叠。确保向可折叠的元素添加.collapse类，若是你想让它默认打开，再添加类.in。

为了给一个折叠块控件添加相似手风琴组的效果，还须要添加data属性data-parent="#selector"。能够参考下面的演示了解实践例子。

利用JavaScript

人为启用它：

$('.collapse').collapse()

选项

能够利用data属性或者JavaScript传递选项。若是用data属性，请把选项名追加到data-后面，好比说写成data-parent=""。

名称	类型	默认值	描述
parent	selector	false	若是提供了一个选择器，而后当某个折叠块打开时，这个指定的父元素下面全部别的折叠块元素都将自动关闭。与传统的手风琴行为类似，这依赖于.panel类。
toggle	boolean	true	在调用中折叠块元素。

方法

.collapse(options)

将某块内容激活为一个可折叠的元素。接受一个可选的参数object。

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

.collapse(‘toggle’)

切换一个可折叠元素打开或隐藏。

.collapse(‘show’)

显示一个可折叠元素。

.collapse(‘hide’)

隐藏一个可折叠元素。

事件

Bootstrap的折叠类为相关的回调函数提供了事件接口。

事件类型	描述
show.bs.collapse	当调用show实例方法时，会当即触发该事件。
shown.bs.collapse	当折叠块对用户来讲可见时（须要等待CSS过渡完成），会触发该事件。
hide.bs.collapse	当调用hide实例方法时，会当即触发该事件。
hidden.bs.collapse	当折叠块对用户来讲终于完成隐藏时（须要等待CSS过渡完成），会触发该事件。

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