Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js)，即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来，我们就可以实现诸如手风琴或是导航栏这样的复杂组件。

引入文件

<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>

bootstrap-collapse.js就是实现折叠的插件，当然你也可以只引入 bootstrap.js，里面包含了所有的 bootstrap js插件。bootstrap-transition.js可有可无，它能使折叠过程中产生过度效果。

基本用法

1.使用标记

一般每个折叠组件都会有一个触发元素，如：按钮、超链接等，通过点击触发元素来控制折叠元素的展开和隐藏。这样，只要在触发元素上添加 data-toggle="collapse" 和 data-target 标记就能自动变成可折叠的。 data-target 属性接受一个css选择器，指向折叠元素。另外，在折叠元素上需要添加 .collapse 类样式。如果要默认某折叠元素是打开的，可在折叠元素上添加 .in 。做个demo：

引入js库

<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>

Html代码

<body>
<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单折叠效果
</button>
 
<div id="demo" class="collapse in">
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>

</body>

2.使用js代码

除了上面的标记法创建折叠组件外，还可以用纯js语句来创建。如下：

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

上面代码的意思是，将id为 myCollapsible 的元素变为一个折叠组件，同时需要传入一个对象，对象属性toggle为true时，将普通元素变为折叠组件，为false时，可将折叠组件还原为普通的元素。

一旦某个元素变为折叠组件，我们就可以通过下面的js语句来控制它的折叠和打开：

$('#myCollapsible').collapse('toggle')

在折叠和打开间互相切换

$('#myCollapsible').collapse('show')

打开

$('#myCollapsible').collapse('hide')

折叠

demo如下：

Html代码

<div id="demo">
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>
<br/>
<a href="javascript:void(0)"  onClick="open_collapse()">打开</a><br/>
<a href="javascript:void(0)"  onClick="hide_collapse()">折叠</a>

Js代码

<script type="text/javascript">
//将id为demo的元素变为折叠组件
$("#demo").collapse({
        toggle: true
    });
//打开
function open_collapse(){
	$("#demo").collapse("show");
}
//折叠
function hide_collapse(){
	$("#demo").collapse("hide");
}
</script>

使用事件监听

bootstrap还为折叠组件提供了一组事件，通过这些事件，我们可以监听用户的动作和折叠组件的状态。

Bootstrap的折叠类扩展了一组事件，可以介入折叠的某些功能实现。

事件	描述
show	该事件在用户触发打开动作时立刻触发。
shown	该事件在折叠组件完全打开后触发（过渡效果完成后）。
hide	该事件在用户触发折叠动作时立刻触发。
hidden	该事件在折叠组件完全折叠后触发（过渡效果完成后）。

show和hide是监听动作的，shown和hidden是监听状态的，这点要注意。

如何添加事件：

$('#myCollapsible').on('hidden', function () { 
 // 做点hidden之后的事情 
}

demo如下：

Html代码

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  简单折叠效果
</button>
 
<div id="demo" class="collapse in">
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>

Js代码

<script type="text/javascript">
$('#demo').on('hidden', function () {
    alert("事件：hidden");
})
$('#demo').on('shown', function () {
    alert("事件：shown");
})
$('#demo').on('show', function () {
    alert("事件：show");
})
$('#demo').on('hide', function () {
    alert("事件：hide");
})
</script>

实现手风琴效果

一般，单个组件的折叠用处并不大，我们需要的是利用单个组件的特性实现复杂的功能单元。下面就来介绍下手风琴效果。利用手风琴效果我们可以解决某一类的问题，如：可以创建个导航栏，或是新闻列表中控制文章摘要的显示等等。

手风琴效果的特点是：作为某一容器下的所有折叠组件，当某个折叠组件打开时，所有其他的折叠组件必须关闭。

如何创建：

只需要在上面使用标记法的基础上在加上 data-target 即可。属性值也是个css选择器，指向所有折叠组件所在的父容器。

Bootstrat为手风琴效果也提供了一组样式，利用这些样式可以很快创建出来。下面给个demo：

Html代码

<div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"  data-target="#collapseOne" data-parent="#accordion2">
                  国土问题
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                  门票问题
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                  超生罚款
                </a>
              </div>
              <div id="collapseThree" class="accordion-body in" style="height: auto;">
                <div class="accordion-inner">
		  学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
                </div>
              </div>
            </div>
</div>

最外层有个id="accordion2"的容器，没有这个容器就无法控制所有折叠组件的关闭。而每个折叠组件的data-parent="#accordion2" 属性必须指向这个容器。另外，有个小技巧，当触发元素是个超链接时，也可使用href="#collapseTwo"的形式替换掉 data-target="#collapseTwo "。

使用js创建

上面讲述了如何使用标记创建手风琴效果，这是推荐的做法，确实很方便简单。用js也可以，只是稍微复杂点，下面我写了个demo，可以参考下:

Html代码

<div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  国土问题
                </a>
              </div>
              <div class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  门票问题
                </a>
              </div>
              <div class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
		  目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
                </div>
              </div>
            </div>
			
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle">
                  超生罚款
                </a>
              </div>
              <div class="accordion-body in" style="height: auto;">
                <div class="accordion-inner">
		  学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
                </div>
              </div>
            </div>
</div>

Js代码

<script type="text/javascript">
//创建折叠组件
$(".accordion-body").collapse({
        toggle: true,parent:'#accordion2'
    });
//为触发元素添加单击事件，在回调函数里打开折叠元素，此时由于上面已经指定了parent属性，所以Bootstrap会为我们自动将其他折叠组件关闭
$('.accordion-heading').on('click', function () {
    var self = this;
    $(self).nextAll().eq(0).collapse("show");
})
</script>

其中在创建折叠组件时需要添加parent属性，属性值是个css选择器，指向父容器,作用和data-parent标记同。

博客转移：http://www.see-source.com/blog/300000033/364