通过网络上的一系列查找，总结出的collapse插件堆叠效果(网上没有找到，只能自己弄了，帮助那些和我遇到一样状况的同学)

首先感谢一位网友的知识总结给了我灵感，在这里先帮他推荐一波（https://www.jianshu.com/p/f117be2294ea）

//笔记
      data-toggle="collapse"  添加到想要展开或折叠的组件连接上

      href或data-target属性添加到父组件  他的值是子组件的id

      data-parent属性  把折叠面板的id添加到要展开或折叠的组件的链接上

      collapse隐藏元素、collapse in 显示元素、collapsing过渡效果

下面是我的代码，可以先运行一下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

     <title>BootStrap导航</title>

 <!--[if lt IE 9]>

       如果IE的版本小于 IE9  就加载标签，兼容ie8

       <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

       <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

       <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 class="panel-title">

               <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

                 主要内容

               </a>

             </h4>

           </div>

           <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

             <div class="panel-body">

               <div>

               <!-- 显示内容区1 -->

               <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">

                 <div class="panel panel-default">

                   <div class="panel-heading" role="tab" id="headingTwo">

                     <h4 class="panel-title">

                       <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">

                         标签1

                       </a>

                     </h4>

                   </div>

                   <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

                     <div class="panel-body">

                       <div>

                       <!-- 显示内容区2 -->

                       <div class="panel-heading" role="tab" id="headingOne1">

                         <h4 class="panel-title">

                           <a role="button" data-toggle="collapse" data-parent="#headingOne1" href="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1">

                             标签标题

                           </a>

                         </h4>

                       </div>

                       <div id="collapseOne1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne1">

                         <div class="panel-body">

                           标签内容

                         </div>

                       </div>

                       <!-- End -->

                       </div>

                     </div>

                   </div>

                 </div>

               </div>

               <!-- End -->

               </div>

             </div>

           </div>

         </div>

       </div>

     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

 </body>

 </html>

展示结果如下

在这里我具体的对上面的笔记讲一下

data-toggle="collapse"    用来确定展开或折叠的组件链接(自我认为就是需要展开显示的div对象)
href或data-target  他们的属性值  是存放的是：需要展开或折叠的 div 的 id 值  
 
...
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">  //点击的对象

　　 标签1

</a>
...
 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">    //显示的对象
...
　　标签内容
...
</div>
data-parent 他们中存放的属性值是他们当前父级的面板id
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

...

　　　　<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

　　　　　　主要内容

　　　　</a>

　　　　...

　　　　　　<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
　　　　　　　　<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">

　　　　　　　　　　标签1

　　　　　　　　</a>

　　　　　　
　　　　　　　<div class="panel-heading" role="tab" id="headingOne1">
　　　　　　　　<a role="button" data-toggle="collapse" data-parent="#headingOne1" href="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1">

　　　　　　　　　　标签标题

　　　　　　　　</a>

...

</div>

希望对各位有帮助  (可以的话，帮忙点个  推荐)，谢谢啦

BootStrap中的collapse插件堆叠效果的更多相关文章

  1. Bootstrap中的datetimepicker插件用法总结（转载）

    datetimepicker用法总结   目录 datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开始 3 startD ...

  2. Bootstrap中的Affix插件

    我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. ...

  3. Bootstrap支持的JavaScript插件

    1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...

  4. 12、Bootstrap中文文档（其它插件分享）

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  5. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 在Bootstrap开发框架中使用bootstrap-datepicker插件

    在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=dat ...

  7. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  8. Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  9. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

随机推荐

  1. libevent::事件::定时器

    #include <cstdio> #include <errno.h> #include <sys/types.h> #include <event.h&g ...

  2. php中转菜刀脚本过狗免杀

    <?php $target="url";//shell 地址 菜刀连这个脚本做中转 $post=''; $i=0; foreach($_POST AS $K=>$V) ...

  3. mysql数据库limit分页，排序操作

    看到网上很多朋友在问,limit分页之后按照字段属性排序的问题,在这里分享一下我的用法: 1.网上答案: 每页显示5个,显示第三页信息,按照年龄从小到大排序 select * from student ...

  4. 接口 IEnumerable

    C#提供了可供类继承的接口,在此解释一下经常遇到的IEnumerable,在此首相解释一下接口,如下例所示: /// <summary> /// 简述Interface的用法 /// &l ...

  5. django-模型之(ORM)对象关系映射（一）

    所谓对象关系映射,就是将数据库的一些名字与python中的一些名字相对应,表名-->类名,字段-->属性,操作(增删改查)-->方法.这样,我们就可以通过对Python代码的编辑来对 ...

  6. SpringBoot 逻辑异常统一处理

    构建项目 我们将逻辑异常核心处理部分提取出来作为单独的jar供其他模块引用,创建项目在parent项目pom.xml添加公共使用的依赖,配置内容如下所示: <dependencies> & ...

  7. C#/.NET/.NET Core定时任务调度的方法或者组件有哪些--Timer,FluentScheduler,TaskScheduler,Gofer.NET,Coravel,Quartz.NET还是Hangfire？

    原文由Rector首发于 码友网 之 <C#/.NET/.NET Core应用程序编程中实现定时任务调度的方法或者组件有哪些,Timer,FluentScheduler,TaskSchedule ...

  8. TICK技术栈（三）InfluxDB安装及使用

    1.什么是InfluxDB? InfluxDB是一个用Go语言开发的时序数据库,用于处理高写入和查询负载,专门为带时间戳的数据编写,对DevOps监控,IoT监控和实时分析等应用场景非常有用.通过自定 ...

  9. [tesseract-ocr]OCR图像识别Ubuntu下环境包安装

    问题: ImportError: libSM.so.6: cannot open shared object file: No such file or directory 解决: sudo apt- ...

  10. Java中打印日志，这4点很重要！

    目录 一.预先判断日志级别 二.避免无效日志打印 三.区别对待错误日志 四.保证记录完整内容 打印日志,要注意下面4点. 一.预先判断日志级别 对DEBUG.INFO级别的日志,必须使用条件输出或者使 ...