Bootstrap JS插件使用實例(6)-摺疊(手風琴效果)

時間 2019-11-17

標籤 bootstrap 插件使用實例摺疊手風琴效果欄目 Bootstarp 简体版

原文原文鏈接

本篇文章討論Bootstrap的js插件的摺疊效果(bootstrap-collapse.js)，即控制頁面某一區域內容的顯示和隱藏。經過將多個這樣的摺疊元素組合起來，咱們就能夠實現諸如手風琴或是導航欄這樣的複雜組件。 javascript

引入文件

<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.使用標記 css

通常每一個摺疊組件都會有一個觸發元素，如：按鈕、超連接等，經過點擊觸發元素來控制摺疊元素的展開和隱藏。這樣，只要在觸發元素上添加 data-toggle="collapse" 和 data-target 標記就能自動變成可摺疊的。 data-target 屬性接受一個css選擇器，指向摺疊元素。另外，在摺疊元素上須要添加 .collapse 類樣式。若是要默認某摺疊元素是打開的，可在摺疊元素上添加 .in 。作個demo： html

引入js庫 java

<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代碼 jquery

除了上面的標記法建立摺疊組件外，還能夠用純js語句來建立。以下： bootstrap

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

上面代碼的意思是，將id爲 myCollapsible 的元素變爲一個摺疊組件，同時須要傳入一個對象，對象屬性toggle爲true時，將普通元素變爲摺疊組件，爲false時，可將摺疊組件還原爲普通的元素。

一旦某個元素變爲摺疊組件，咱們就能夠經過下面的js語句來控制它的摺疊和打開： ide

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

在摺疊和打開間互相切換函數

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

打開 this

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

摺疊 spa

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