用bootstrap实现手风琴效果

最新推荐文章于 2024-10-06 13:07:20 发布

追涨杀跌的小韭菜

最新推荐文章于 2024-10-06 13:07:20 发布

阅读量1.5k

点赞数

分类专栏：前端小案例 bootstrap 文章标签： bootstrap 手风琴效果

本文链接：https://blog.csdn.net/qq_32054169/article/details/83536657

版权

前端小案例同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

bootstrap

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>

  <link href="./css/bootstrap.css" rel="stylesheet">
  <script src="./js/html5shiv.min.js"></script>
  <script src="./js/respond.min.js"></script>
</head>
<body>
<div class="container">
  <h3>bootstrap第四部分:插件---折叠效果</h3>

  <h3>折叠效果应用1:手风琴</h3>

  <div class="panel-group" id="pg">
    <!--第一个面板-->
    <div class="panel panel-danger">
      <div class="panel-heading">
        <a class="panel-title" data-parent="#pg"  data-toggle="collapse" href="#xyj">西游记简介</a>
      </div>
      <div id="xyj" class="collapse in panel-collapse">
        <div class="panel-body">
          讲述了一个和尚和四个动物的故事
          讲述了一个和尚和四个动物的故事
          讲述了一个和尚和四个动物的故事
          讲述了一个和尚和四个动物的故事
          讲述了一个和尚和四个动物的故事
          讲述了一个和尚和四个动物的故事
        </div>
      </div>
    </div>

    <!--第二个面板-->
    <div class="panel panel-success">
      <div class="panel-heading">
        <a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#shz">水浒传简介</a>
      </div>
      <div id="shz" class="collapse panel-collapse">
        <div class="panel-body">
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
          讲述了105个男人和三个女人的故事
        </div>
      </div>

    </div>

    <!--第三个面板-->
    <div class="panel panel-info">
      <div class="panel-heading">
        <a class="panel-title" data-parent="#pg" data-toggle="collapse" href="#sgz">三国志简介</a>
      </div>
      <div id="sgz" class="collapse panel-collapse">
        <div class="panel-body">
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
          讲述了一群人打群架的故事
        </div>
      </div>
    </div>
  </div>

</div>


<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>

给panel-group加id,每个a加data-parent属性指向panel-group的id,即可实现只能有一个展开的效果