折叠插件

折叠插件（collapse），通过点击折叠和展开内容。

1、折叠插件的用法

1.1 通过data属性调用折叠插件

    <!-- 方法1 通过data属性调用折叠插件 -->
    <button class="btn btn-primary" data-toggle="collapse" data-target="#context1">通过data属性调用折叠插件</button>
    <!-- 内容 -->
    <div class="collapse" id="context1">
      <div class="well">
        这里是折叠插件要显示的内容
      </div>
    </div>

 Bootstrap-v3-js插件-折叠插件_html

Bootstrap-v3-js插件-折叠插件_sed_02

1.2 通过js代码调用折叠插件

    <!-- 方法2 通过js代码实现折叠插件 -->
    <button class="btn btn-success" id="btn2" data-toggle="collapse">通过js代码调用折叠插件</button>
    <!-- 内容 -->
    <div class="collapse" id="context2">
      <div class="well">
        这里是折叠插件要显示的内容
      </div>
    </div>
    <script>
      $(function(){
        $('#btn2').on('click',function(){
          $('#context2').collapse('toggle');  //调用折叠插件的toggle方法
        })
      })
    </script>

Bootstrap-v3-js插件-折叠插件_sed_03

Bootstrap-v3-js插件-折叠插件_js代码_04

2、折叠插件的实例

 实例1 面板组（一次只允许打开一个面板）

Bootstrap-v3-js插件-折叠插件_Bootstrap_05

<!-- 面板组 -->
<div class="panel-group" id="accordion">
  <!-- 第一个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        context1
      </div>
    </div>
  </div>
  <!-- 第二个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        context2
      </div>
    </div>
  </div>
  <!-- 第三个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        context3
      </div>
    </div>
  </div>
</div>

实例2 面板组（一次允许打开多个面板）

Bootstrap-v3-js插件-折叠插件_bootstrap_06

<!-- 一次允许打开多个面板(不指定父面板) -->
<!-- 面板组 -->
<div class="panel-group">
  <!-- 第一个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">
          Collapsible Group Item1
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        context1
      </div>
    </div>
  </div>
  <!-- 第二个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse2">
          Collapsible Group Item2
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        context2
      </div>
    </div>
  </div>
  <!-- 第三个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse"  href="#collapse3">
          Collapsible Group Item3
        </a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
        context3
      </div>
    </div>
  </div>
</div>

3、折叠插件的参数

parent：默认值是false，如果设置了parent，则一次只允许打开一个面板

toggle：默认值是false

4、折叠插件的参数

  • show.bs.collapse
  • shown.bs.collapse
  • hide.bs.collapse
  • hidden.bs.collapse

 

完整代码 
<!DOCTYPE html>
<html>
  <head>
      <!-- HTML5文档类型 -->
    <meta charset="utf-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 让IE浏览器使用最新的引擎渲染页面 -->
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap3核心css库 -->
    <link rel="stylesheet" href="css/bootstrap-v3.css">
    <!-- jquery核心js库 -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap3核心js库 -->
    <script src="js/bootstrap-v3.js"></script>
    <title>bootstrap插件-折叠插件</title>
    <style>
      body{
        padding: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 方法1 通过data属性调用折叠插件 -->
    <button class="btn btn-primary" data-toggle="collapse" data-target="#context1">通过data属性调用折叠插件</button>
    <!-- 内容 -->
    <div class="collapse" id="context1">
      <div class="well">
        这里是折叠插件要显示的内容
      </div>
    </div>
<hr>
    <!-- 方法2 通过js代码实现折叠插件 -->
    <button class="btn btn-success" id="btn2" data-toggle="collapse">通过js代码调用折叠插件</button>
    <!-- 内容 -->
    <div class="collapse" id="context2">
      <div class="well">
        这里是折叠插件要显示的内容
      </div>
    </div>
<hr>

<!-- 一次只允许打开一个面板(指定父面板) -->
<div class="panel-group" id="accordion">
  <!-- 第一个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        context1
      </div>
    </div>
  </div>
  <!-- 第二个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        context2
      </div>
    </div>
  </div>
  <!-- 第三个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        context3
      </div>
    </div>
  </div>
</div>

<hr>

<!-- 一次允许打开多个面板(不指定父面板) -->
<!-- 面板组 -->
<div class="panel-group">
  <!-- 第一个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">
          Collapsible Group Item1
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        context1
      </div>
    </div>
  </div>
  <!-- 第二个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" href="#collapse2">
          Collapsible Group Item2
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        context2
      </div>
    </div>
  </div>
  <!-- 第三个面板 -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse"  href="#collapse3">
          Collapsible Group Item3
        </a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
        context3
      </div>
    </div>
  </div>
</div>



    <script>
      $(function(){
        $('#btn2').on('click',function(){
          $('#context2').collapse('toggle');  //调用折叠插件的toggle方法
        })
      })
    </script>


  </body>
</html>