bootstrap實現手風琴功能(樹形列表)

首先把架包拷進項目，然后在頁面中引進css,js

 <script src="js/jquery/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--圖標-->
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">

1.(單個的顯示隱藏，不影響其他的組件)每個折疊組件都會有一個觸發元素，如：按鈕、超鏈接等，通過點擊觸發元素來控制折疊元素的展開和隱藏。這樣，

只要在觸發元素上添加  data-toggle="collapse"  和  data-target="#id"  標記就能自動變成可折疊的。  data-target  屬性接受一個css選擇器，指向折疊元素。另外，在折疊元素上需要添加 .collapse  類樣式。如果要默認某折疊元素是打開的，可在折疊元素上添加  .in 

example：

<button class="btn btn-danger" data-toggle="collapse" data-target="#demoOne"> 按鈕觸發 </button>
<div id="demoOne" class="collapse"> 前一段時間一個段子說，某國的網民在因國土問題與中國網民爭吵時說，我要打到北京，中國的網民非常淡然地回應，就你那經濟水平，交得起過路費嗎？這兩天新的段子說，李白要是活在今天的話，估計一大半以上他的詩根本寫不出來，因為名山大川的門票他根本買不起。 </div>

<div>
    <a data-toggle="collapse" href="#demoTwo">超鏈接觸發</a>
</div>
<div id="demoTwo" class="collapse in">

金正恩將軍在朝外記者陪同下視察朝鮮航天局時宣布：10年內，要讓朝鮮宇航員登陸太陽！ 一位美國記者問道，太陽溫度那么高你們怎么登上去呢？頓時全場鴉雀無聲。<br/>
大家不知道該怎樣回答這個問題。 這時金將軍緩緩說道，我們天黑去！頓時全場朝鮮人響起雷鳴般的掌聲…… <br/>
正在看電視直播的奧巴馬，冷笑着對周圍的同僚說：這二貨，天黑了根本沒太陽！ 白宮內也響起了雷鳴般的掌聲 ！！

</div>

 

效果：(可以同時打開)

 

2.（手風琴的效果）作為某一容器下的所有折疊組件，當某個折疊組件打開時，所有其他的折疊組件必須關閉。

   定義data-parent屬性，data-parent取值與手風琴面板容器的標識符相匹配。

example：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標題一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">標題一對應的內容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">標題二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">標題二對應的內容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">標題三</a></h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">標題三對應的內容</div>
        </div>
    </div>
</div>

效果：（只能打開一項）

 

這是自己學習過程中的記錄，方便自己回顧，好記性不如爛筆頭。

作者：藝至

             ---------2016-02-23 13:46:22