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

为什么80%的码农都做不了架构师？>>>   

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

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

示例

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

• .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… 
})

转载于:https://my.oschina.net/asktao/blog/647458