Bootstrap折叠

Bootstrap折叠

基本折叠

折叠可用来显示和隐藏内容

<button class="btn btn-default" data-toggle="collapse" data-target="#demo">可折叠</button>

<div id="demo" class="collapse">
    被折叠的区域
</div>

• .collapse类表示可被折叠的元素(上面的<div>元素)
• 在<a>或者<button>上，添加一个属性data-toggle="collapse"，添加上data-target="#id"来连接button和折叠元素
• 对<a>元素，可使用href属性来代替data-target属性

<a>元素，折叠实例如下：

<a href="#demo" data-toggle="collapse">折叠</a>
<div id="demo" class="collapse">
    被折叠的元素
</div>

默认情况下，折叠的内容是隐藏的，可添加.in类，来展示内容

<a href="#demo" data-toggle="collapse">折叠</a>
<div id="demo" class="collapse in">
    被折叠的元素
</div>

可折叠面板

    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse1">可折叠面板</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">Panel Body</div>
                <div class="panel-footer">Panel Footer</div>
            </div>
        </div>
    </div>

效果如下：

可折叠List Group

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

效果如下：

手风琴效果

<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="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

效果如下：

data-parent表示当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭，就是打开一个，其它的关闭，类似于手风琴

Bootstrap JS Collapse

一些方法：

扫描二维码关注公众号，回复： 887901 查看本文章

1.激活内容为可折叠元素。接受一个可选的 options 对象

$('#identifier').collapse({
    toggle: false
}

2.切换显示/隐藏可折叠元素

$('#identifier').collapse('toggle')

3.显示可折叠元素

$('#identifier').collapse('show')

4.隐藏可折叠元素

$('#identifier').collapse('hide')

事件

1.show.bs.collapse在调用 show 方法后触发该事件
2.shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）
3.hide.bs.collapse当调用 hide 实例方法时立即触发该事件
4.hidden.bs.collapse当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）

如下的例子
1.button展开和折叠对应不同的icon

<div class="container">
    <h2>Expand and Collapse with different icons</h2>
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">
        <span class="glyphicon glyphicon-collapse-down"></span> Open
    </button>
    <div id="demo" class="collapse">
        被折叠/打开的内容
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#demo").on("hide.bs.collapse", function(){
            $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
        });
        $("#demo").on("show.bs.collapse", function(){
            $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
        });
    });
</script>

如下的展开和折叠状态：

也可以使用css使用

  <style>
  /* 可折叠内容展示的icon */
  .btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
    float: right;
    margin-left: 15px;
  }
  /* 可折叠内容隐藏的icon */
  .btn.collapsed:after {
    content: "\e080";
  }
</style>

<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-lg btn-info collapsed" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

效果如下：