亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)

 更新時(shí)間：2016年12月08日 08:38:06   作者：kikay  
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之折疊的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

折疊（Collapse）插件可以很容易地讓頁(yè)面區(qū)域折疊起來(lái)。

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>

效果如下：

這里有個(gè)新的屬性：data-parent ，用于把折疊面板（accordion）的 id 添加到要展開或折疊的組件的鏈接上。

0x02 JS方式

也可以通過(guò)JS代碼來(lái)動(dòng)態(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)，因?yàn)閠oggle初始化均為false。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript分頁(yè)功能的實(shí)現(xiàn)方法

    JavaScript分頁(yè)功能的實(shí)現(xiàn)方法

    這篇文章主要介紹了JavaScript分頁(yè)功能的實(shí)現(xiàn)方法,涉及javascript操作分頁(yè)的相關(guān)技巧,需要的朋友可以參考下
    2015-04-04
  • 發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的

    發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的

    發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...
    2007-04-04
  • js判斷兩個(gè)日期是否相等的方法

    js判斷兩個(gè)日期是否相等的方法

    大家一定遇到過(guò)這樣的情況，有兩個(gè)日期對(duì)象，然后需要判斷他們是否相等，下面來(lái)說(shuō)下判斷的方法
    2013-09-09
  • next.js之getStaticProps?getStaticPaths使用技巧解析

    next.js之getStaticProps?getStaticPaths使用技巧解析

    這篇文章主要為大家介紹了next.js之getStaticProps?getStaticPaths使用技巧解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-06-06
  • 詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑

    詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑

    這篇文章主要介紹了詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 深入理解MVC中的時(shí)間js格式化

    深入理解MVC中的時(shí)間js格式化

    下面小編就為大家?guī)?lái)一篇深入理解MVC中的時(shí)間js格式化。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移

    js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • javascript 三種編解碼方式

    javascript 三種編解碼方式

    js對(duì)文字進(jìn)行編碼涉及3個(gè)函數(shù)：escape,encodeURI,encodeURIComponent，相應(yīng)3個(gè)解碼函數(shù)：unescape,decodeURI,decodeURIComponent
    2010-02-02
  • three.js創(chuàng)建樓層布局圖的示例代碼

    three.js創(chuàng)建樓層布局圖的示例代碼

    本文主要介紹了three.js創(chuàng)建樓層布局圖的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Uncaught?SyntaxError:Unexpected?token?'<'?(at?xxx.js)解決分析

    Uncaught?SyntaxError:Unexpected?token?'<'?(

    這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實(shí)例探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2024-01-01

最新評(píng)論