bootstrap之折叠

bootstrap之折叠

作者原创，未经允许，拒绝转载。

 

<!-- div的class="panel-group"代表这是一个折叠组 对于data-parent="#accordion"的都算是一个面板组 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <!-- 第一部分 -->
  <div class="panel panel-default">
    <!-- 面板标题-->
    <div class="panel-heading" role="tab" id="headingOne">
      <!-- h4标题 -->
      <h4 class="panel-title">
        <!-- a 链接有一个 事件，collapse 折叠，对 href="#collapseOne"（id=collapseOne） 的对象造成影响 -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          第一个部分
        </a>
      </h4>
    </div>
    <!-- 折叠的部分 -->
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <!-- 折叠的内容 -->
      <div class="panel-body">
        这是面板一的内容
      </div>
    </div>
  </div>
  <!-- ...............第二个面板.................. -->
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">第二个部分</a>
      </h4>

    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        面板二的内容
      </div>
    </div>
  </div>
</div>

 

class="panel-group"：面板组
id="accordion"：对于data-parent="#accordion"的都算是一个面板组，只允许一个面板开着
class="panel panel-default"
panel：面板
panel-default：样式
class="panel-heading"面板标题
class="panel-title":标题
data-toggle="collapse"：折叠事件
data-parent="#accordion"：对折叠组进行绑定，类似于单选。
href="#collapseOne"：对自己的内容进行绑定
id="collapseOne"：标题所对应的内容标记
class="panel-body"：内容

博客已搬家 技术寇的分享