通過網絡上的一系列查找，總結出的collapse插件堆疊效果(網上沒有找到，只能自己弄了，幫助那些和我遇到一樣狀況的同學)
首先感謝一位網友的知識總結給了我靈感，在這里先幫他推薦一波（https://www.jianshu.com/p/f117be2294ea）
//筆記
data-toggle="collapse" 添加到想要展開或折疊的組件連接上
href或data-target屬性添加到父組件 他的值是子組件的id
data-parent屬性 把折疊面板的id添加到要展開或折疊的組件的鏈接上
collapse隱藏元素、collapse in 顯示元素、collapsing過渡效果
下面是我的代碼，可以先運行一下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 8 <title>BootStrap導航</title> 9 <!--[if lt IE 9]> 10 如果IE的版本小於 IE9 就加載標簽，兼容ie8 11 <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> 12 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> 13 <![endif]--> 14 </head> 15 <body> 16 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 17 <div class="panel panel-default"> 18 <div class="panel-heading" role="tab" id="headingOne"> 19 <h4 class="panel-title"> 20 <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 21 主要內容 22 </a> 23 </h4> 24 </div> 25 <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 26 <div class="panel-body"> 27 <div> 28 <!-- 顯示內容區1 --> 29 <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true"> 30 <div class="panel panel-default"> 31 <div class="panel-heading" role="tab" id="headingTwo"> 32 <h4 class="panel-title"> 33 <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne"> 34 標簽1 35 </a> 36 </h4> 37 </div> 38 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 39 <div class="panel-body"> 40 <div> 41 <!-- 顯示內容區2 --> 42 <div class="panel-heading" role="tab" id="headingOne1"> 43 <h4 class="panel-title"> 44 <a role="button" data-toggle="collapse" data-parent="#headingOne1" href="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1"> 45 標簽標題 46 </a> 47 </h4> 48 </div> 49 <div id="collapseOne1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne1"> 50 <div class="panel-body"> 51 標簽內容 52 </div> 53 </div> 54 <!-- End --> 55 </div> 56 </div> 57 </div> 58 </div> 59 </div> 60 <!-- End --> 61 </div> 62 </div> 63 </div> 64 </div> 65 </div> 66 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> 67 <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 68 <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> 69 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> 70 </body> 71 </html>
展示結果如下
在這里我具體的對上面的筆記講一下
data-toggle="collapse" 用來確定展開或折疊的組件鏈接(自我認為就是需要展開顯示的div對象)
href或data-target 他們的屬性值 是存放的是：需要展開或折疊的 div 的 id 值
...
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne"> //點擊的對象
標簽1
</a>
...
<div
id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> //顯示的對象
...
標簽內容
...
</div>
data-parent 他們中存放的屬性值是他們當前父級的面板id
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> ... <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 主要內容 </a> ... <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
標簽1
</a>
<div class="panel-heading" role="tab" id="
headingOne1">
<a role="button" data-toggle="collapse" data-parent="#headingOne1" href="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1">
標簽標題
</a>
...
</div>
希望對各位有幫助 (可以的話，幫忙點個 推薦)，謝謝啦
