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的折叠类扩展了一组事件，可以介入折叠的某些功能实现。
| 事件 | 描述 |
|---|---|
| show | 该事件在用户触发打开动作时立刻触发。 |
| shown | 该事件在折叠组件完全打开后触发（过渡效果完成后）。 |
| hide | 该事件在用户触发折叠动作时立刻触发。 |
| 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