通过网络上的一系列查找，总结出的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. [BZOJ1415][NOI2005]聪聪与可可

    Description Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点 ...

  2. ‎Cocos2d-x 学习笔记(14.2) EventListener _paused _isEnabled _isRegistered

    监听器3个bool类型成员变量. 监听器能设置是否能够接收事件. 能随时接收事件进行处理,此时把它看做工作状态,需要满足条件:     _paused = false;     _isEnabled ...

  3. SpringBoot是如何动起来的？

    程序入口 SpringApplication.run(BeautyApplication.class, args); 执行此方法来加载整个SpringBoot的环境. 1. 从哪儿开始? Spring ...

  4. VMware安装和linux（centos7）系统安装

    下载centos系统ISO镜像 安装linux系统和winsdows安装系统一样,需要系统文件.浏览器访问centos官网进行下载,http://www.centos.org,因为是国外网站所有下载速 ...

  5. Python小工具：利用ffmpy3库3秒钟将视频转换为音频

    作者 | pk 哥 来源公众号 | Python知识圈(ID:PythonCircle) 最近,有读者微信上私聊我,想让我写一篇视频批量转换成音频的文章,我答应了,周末宅家里把这个小工具做出来了. 这 ...

  6. Linux对目录操作命令

    cd /home        进入 '/ home' 目录 cd ..        返回上一级目录 cd ../..        返回上两级目录 cd        进入个人的主目录 cd ~u ...

  7. 【Bug】解决 SpringBoot Artifact contains illegal characters 错误

    解决 SpringBoot  Artifact contains illegal characters错误 错误原因:Artifact包含非法字符(大写字母) 解决方法:将Artifact名称改成小写 ...

  8. Newtonsoft—Json.NET常用方法简述

    Json.NET常用方法汇总(可解决日常百分之90的需求) 0.Json.NET基础用法 首先去官网下载最新的Newtonsoft.Json.dll(也可以使用VS自带的NuGet搜索Json.NET ...

  9. Linux 修改网卡名

    1. 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens32 (“ens32”为当前网卡名) 将NAME.DEVICE项修改为eth0 2.  ...

  10. 设计模式（二）Adapter模式

    Adapter模式也被成为Wrapper模式.适配器模式用于填补“现有的程序”和“所需的程序”之间差异的设计模式. Adapter模式有两种,即使用继承的适配器和使用委托的适配器. 1.使用继承的适配 ...