Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
更新時間：2016年12月08日 08:38:06 作者：kikay
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之折疊的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
折疊（Collapse）插件可以很容易地讓頁面區(qū)域折疊起來。
0x01 例子
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>折疊插件</title> </head> <body> <div class="container"> <div class="page-header"> <h1>折疊插件</h1> </div> <div class="panel-group" id="panelGroup"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup"> 折疊1 </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> 內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1 內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup"> 折疊2 </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"> 內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2 內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2 內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup"> 折疊3 </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"> 內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3 內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3 內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup"> 折疊4 </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse"> <div class="panel-body"> 內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1 內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1 </div> </div> </div> </div> </div> </body> </html>
效果如下：
這里有個新的屬性：data-parent ，用于把折疊面板（accordion）的 id 添加到要展開或折疊的組件的鏈接上。
0x02 JS方式
也可以通過JS代碼來動態(tài)顯示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>JS代碼</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>折疊插件</h1>
</div>
<div class="panel-group" id="panelGroup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
折疊1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1
內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
折疊2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2
內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2
內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
折疊3
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3
內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3
內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
折疊4
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1
內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#collapse1").collapse({
toggle:false
});
$("#collapse2").collapse({
toggle:false
});
$("#collapse3").collapse({
toggle:false
});
$("#collapse4").collapse({
toggle:false
});
})
</script>
</body>
</html>
效果如下：
初始全部是折疊狀態(tài)，因為toggle初始化均為false。
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap 手風(fēng)琴菜單的實現(xiàn)代碼
- bootstrap手風(fēng)琴制作方法詳解
- 簡潔實用的BootStrap jQuery手風(fēng)琴插件
- Angular.js與Bootstrap相結(jié)合實現(xiàn)手風(fēng)琴菜單代碼
- 全面解析Bootstrap手風(fēng)琴效果
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap每天必學(xué)之折疊（Collapse）插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
- bootstrap手風(fēng)琴折疊示例代碼分享
相關(guān)文章
這篇文章主要介紹了JavaScript分頁功能的實現(xiàn)方法,涉及javascript操作分頁的相關(guān)技巧,需要的朋友可以參考下2015-04-04
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04
大家一定遇到過這樣的情況，有兩個日期對象，然后需要判斷他們是否相等，下面來說下判斷的方法2013-09-09
next.js之getStaticProps?getStaticPaths使用技巧解析
這篇文章主要為大家介紹了next.js之getStaticProps?getStaticPaths使用技巧解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
下面小編就為大家?guī)硪黄钊肜斫釳VC中的時間js格式化。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)按鈕進(jìn)行某行上移下移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
js對文字進(jìn)行編碼涉及3個函數(shù)：escape,encodeURI,encodeURIComponent，相應(yīng)3個解碼函數(shù)：unescape,decodeURI,decodeURIComponent2010-02-02
本文主要介紹了three.js創(chuàng)建樓層布局圖的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Uncaught?SyntaxError:Unexpected?token?'<'?(
這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實例探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01