bootstrap的折叠窗口（手风琴切换卡）

最新推荐文章于 2022-04-24 15:02:38 发布

魔幻伊蓝

最新推荐文章于 2022-04-24 15:02:38 发布

阅读量2.9k

点赞数

分类专栏：转岗前的前端开发文章标签： bootstrap 实例

转岗前的前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

2.3版本	3版本
.accordion	.panel-group
.accordion-group	.panel .panel-default
.accordion-heading	.panel-heading
.accordion-body	.panel-collapse
.accordion-inner	.panel-body

以3版本为例，代码实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="......./bootstrap.min.css">
    <script src="........./jquery.min.js"></script>
    <script src="..../bootstrap.min.js"></script>
</head>
<body>
   <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="#collapseOne">点击我进行展开，再次点击我进行折叠。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
       <div class="panel-body">内容1</div>
    </div>
      </div>
      <div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">点击我进行展开，再次点击我进行折叠。第 2 部分
         </a>
            </h4>
    </div>
        <div id="collapseTwo" class="panel-collapse collapse">
       <div class="panel-body">内容2</div>
    </div>
      </div>
      <div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">点击我进行展开，再次点击我进行折叠。第 3 部分
         </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
       <div class="panel-body">内容3</div>
    </div>
    </div>
</div>
</body>
</html>

效果展示： Bootstrap 实例 - 折叠面板

点击我进行展开，再次点击我进行折叠。第 1 部分

内容1

点击我进行展开，再次点击我进行折叠。第 2 部分

内容2

点击我进行展开，再次点击我进行折叠。第 3 部分

内容3

注意：

控制面板内容区是否可视。在Bootstrap框架中，如果想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse，每个面板的内容区都被隐藏起来了；若希望默认第一个面板内容是可视的，只需要在collapse基础上再追加 in 样式。简而言之，装载内容的div的父级div如果含有类in，则该内容的初始状态为打开。
定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。
bootstrap实现折叠面板功能，以上两个版本均可，可相互替换，又略有不同，详细介绍可参考bootstrap官网。
若内容的打开与关闭由button按钮控制，情况又会略有不同，详情不多介绍啦。

这里写图片描述

2017/00/00

魔幻伊蓝

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap的折叠窗口（手风琴切换卡）

2.3版本 3版本 .accordion .panel-group .accordion-group .panel .panel-default .accordion-heading .panel-heading .accordion-body .panel-collapse .accordion-inner .panel-body以3版本为例，代码实例：
复制链接

扫一扫