通过网络上的一系列查找，总结出的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. 控制反转和依赖注入（对IOC,DI理解+案例）

    理解 控制反转说的官方一点就是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其实就是一种设计思想,大概思想就是把设计好的对象交给容器控制,而不是在你内部直接控制. 依赖注入是控制反 ...

  2. 并发编程之Fork/Join

    并发与并行 并发:多个进程交替执行. 并行:多个进程同时进行,不存在线程的上下文切换. 并发与并行的目的都是使CPU的利用率达到最大.Fork/Join就是为了尽可能提高硬件的使用率而应运而生的. 计 ...

  3. 学习了解Shiro框架

    有关Shiro安全框架 实现权限的几种方式 1)通过表来实现 2)shiro框架 3)Spring Security框架 shiro有哪些主要功能 1.授权 访问控制的过程,即确定谁有权访问 2.身份 ...

  4. 在idea中添加try/catch的快捷键

    在idea中添加try/catch的快捷键ctrl+alt+t选中想被try/catch包围的语句,同时按下ctrl+alt+t,出现下图

  5. git jenkins 基本部署之git远程仓库

    1.git远程仓库如何使用? 实战一.如何将本地仓库与远程Gitee进行关联?        1.注册gitee        2.创建一个远程仓库?        3.配置使用远程仓库       ...

  6. 史上最轻松入门之Spring Batch - 轻量级批处理框架实践

    从 MariaDB 一张表内读 10 万条记录,经处理后写到 MongoDB . Batch 任务模型 具体实现 1.新建 Spring Boot 应用,依赖如下: <!-- Web 应用 -- ...

  7. .NETCore下CI/CD之自动化测试

    前言 为了呼应<中国.NET开发者峰会2019上海站>,作为演讲嘉宾,我希望和各位同行建立更多的互动,为此,我特地将部分演讲内容,整理成文章先行发布.本文从零开始,一步一步的引导,从安装J ...

  8. NVDLA中Winograd卷积的设计

    在AI芯片:高性能卷积计算中的数据复用曾提到,基于变换域的卷积计算--譬如Winograd卷积--并不能适应算法上对卷积计算多变的需求.但Winograd卷积依旧出现在刚刚公开的ARM Ethos-N ...

  9. 热门开源网关的性能对比：Goku > Kong > Tyk

    不多说,先展示最后的性能测试结果 我们将Goku与市场上的其他同类热门产品进行比较,使用相同的环境和条件,测试以下产品:Goku.Kong.Tyk.简单介绍下, Goku API Gateway (中 ...

  10. Mui 微信支付、支付宝支付

    利用mui 发起手机微信和支付宝支付 payStatement :调起微信支付接口的参数 参考文档: https://pay.weixin.qq.com/wiki/doc/api/app/app.ph ...