通过网络上的一系列查找，总结出的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. css 动画animation基本属性(干货)

    /* 动画名称 */ animation-name: cloud; /* 属性定义动画完成一个周期所需要的时间,以秒或毫秒计 */ animation-duration:1s; /* 属性定义动画何时 ...

  2. 【Python秘籍】numpy到tensor的转换

    在用pytorch训练神经网络时,我们常常需要在numpy的数组变量类型与pytorch中的tensor类型进行转换,今天给大家介绍一种它们之间互相转换的方法. 一.numpy到tensor 首先我们 ...

  3. nginx 前后端分离 代理转发，解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

  4. 【JS】深入理解JS原型和继承

    前言 在学习JS中的原型,原型链,继承这些知识之前,我们先学习下基础知识:函数和对象的关系.  我们一直都知道,函数也是对象的一种,因为通过instanceof就可以判断出来.但是函数和对象的关系并不 ...

  5. Leetcode Tags（5）Hash Table

    一.500. Keyboard Row 给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词. 输入: ["Hello", "Alaska", &q ...

  6. F#周报2019年第44期

    新闻 Elmish.WPF教程 介绍Orleans 3.0 GC配置历史 介绍ONNX运行时1.0 介绍微软Q&A(预览) 使用App中心持续布署与监控你的UWP,WPF与Windows Fo ...

  7. MySQL计划任务(事件调度器)

    原文:http://www.cnblogs.com/c840136/articles/2388512.html 备忘; MySQL5.1.x版本中引入了一项新特性EVENT,顾名思义就是事件.定时任务 ...

  8. MIT线性代数：19.行列式和代数余子式

  9. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  10. 分类算法之逻辑回归（Logistic Regression

    分类算法之逻辑回归(Logistic Regression) 1.二分类问题 现在有一家医院,想要对病人的病情进行分析,其中有一项就是关于良性\恶性肿瘤的判断,现在有一批数据集是关于肿瘤大小的,任务就 ...