官网的例子：

http://v3.bootcss.com/javascript/#collapse

  1. <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  2.   <div class="panel panel-default">
  3.     <div class="panel-heading" role="tab" id="headingOne">
  4.       <h4 class="panel-title">
  5.         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  6.           Collapsible Group Item #1
  7.         </a>
  8.       </h4>
  9.     </div>
  10.     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  11.       <div class="panel-body">
  12.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  13.       </div>
  14.     </div>
  15.   </div>
  16.   <div class="panel panel-default">
  17.     <div class="panel-heading" role="tab" id="headingTwo">
  18.       <h4 class="panel-title">
  19.         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  20.           Collapsible Group Item #2
  21.         </a>
  22.       </h4>
  23.     </div>
  24.     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  25.       <div class="panel-body">
  26.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <div class="panel panel-default">
  31.     <div class="panel-heading" role="tab" id="headingThree">
  32.       <h4 class="panel-title">
  33.         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  34.           Collapsible Group Item #3
  35.         </a>
  36.       </h4>
  37.     </div>
  38.     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  39.       <div class="panel-body">
  40.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  41.       </div>
  42.     </div>
  43.   </div>
  44. </div>

官网的效果：

自己根据这个折叠组件写的：--看折叠组件部分的代码就好了。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>导航测试</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .navbar-inverse .navbar-header .active{
  9.      background-color: #31708f;
  10. }
  11. .navbar-inverse .navbar-brand {
  12.     color: #fff;
  13.     cursor: pointer;
  14.     padding: 15px 25px;
  15.     font-size: 14px;
  16. }
  17. .navbar-inverse {
  18.     background-color: #337ab7;
  19.     border-color: #337ab7;
  20. }
  21. .navbar-inverse .navbar-nav>li>a {
  22.     color: #fff;
  23. }
  24.  
  25. .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
  26.     color: #fff;
  27.     background-color: #31708f;
  28. }
  29. .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
  30.     color: #fff;
  31.     background-color: #337ab7;
  32. }
  33. input#sw{
  34.     font-style: italic;
  35.     color: #aaa;
  36. }
  37. .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
  38.     border-color: #337ab7;
  39. }
  40. @media (max-width: 767px){
  41.     .navbar-inverse .navbar-nav .open .dropdown-menu .divider{
  42.         background-color: rgba(0,0,0,.075);
  43.     }
  44. }
  45.  
  46. /* 产品分类 */
  47. ul.product_category li {
  48.     float: left;
  49.     list-style: none;
  50. }
  51. ul.product_category {
  52.     padding: 0;
  53. }
  54. .product_category >li{
  55.     padding: 5px 25px;
  56. }
  57. .product_category >li.active{
  58.     background: #ccc;
  59. }
  60.  
  61. /* 手机版产品分类导航 */
  62. ul.product_category_mobile>li {
  63.     padding: 5px 0;
  64.     width: 33.3%;
  65.     text-align: center;
  66.     overflow: hidden;
  67.     text-overflow: ellipsis;
  68.     white-space: nowrap;
  69. }
  70. .product_category_mobile{
  71.     padding: 0;
  72. }
  73. #accordion .category_arrow{
  74.     float: right;
  75.     padding: 0 10px;
  76. }
  77. .panel-heading>li{
  78.     float: left;
  79.     list-style: none;
  80. }
  81. @media (max-width: 767px){
  82.     .pc{
  83.         display: none;
  84.     }
  85.     .mobile{
  86.         display: block;
  87.     }
  88. }
  89.  
  90. @media(min-width: 768px){
  91.     .pc{
  92.         display: block;
  93.     }
  94.     .mobile{
  95.         display: none;
  96.     }
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. <div class="container">
  102.     <div class="row">
  103.         <nav class="navbar navbar-inverse">
  104.             <div class="navbar-header">
  105.               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  106.                 <span class="sr-only">Toggle navigation</span>
  107.                 <span class="icon-bar"></span>
  108.                 <span class="icon-bar"></span>
  109.                 <span class="icon-bar"></span>
  110.               </button>
  111.               <a class="navbar-brand active" onclick="alert('all')">全部</a>
  112.             </div>
  113.  
  114.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  115.               <ul class="nav navbar-nav">
  116.                 <li class="dropdown">
  117.                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">按场景选择 <span class="caret"></span></a>
  118.                   <ul class="dropdown-menu">
  119.                     <li><a href="#">全部</a></li>
  120.                     <li role="separator" class="divider"></li>
  121.                     <li><a href="#">规划</a></li>
  122.                     <li><a href="#">实施</a></li>
  123.                     <li><a href="#">维护</a></li>
  124.                   </ul>
  125.                 </li>
  126.                 <li class="active"><a href="#">我的收藏</a></li>
  127.                 <li><a href="#">最近浏览</a></li>
  128.               </ul>
  129.               <form class="navbar-form navbar-right">
  130.                   <div class="input-group">
  131.                   <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)">
  132.                   <span class="input-group-btn">
  133.                     <button class="btn btn-default" type="button">搜索</button>
  134.                   </span>
  135.                 </div>
  136.                 <!--
  137.                 <div class="form-group">
  138.                   <input id="sw" type="text" class="form-control" value="请输入关键字(名称/描述)">
  139.                 </div>
  140.                 <input type="button" class="btn btn-default" value="搜索"/>
  141.                 -->
  142.               </form>
  143.             </div>
  144.         </nav>
  145.     </div>
  146.  
  147.     <!-- 产品分类 -->
  148.     <div class="row pc">
  149.         <ul class="product_category clearfix">
  150.             <li><a href="#">所有产品</a></li>
  151.             <li class="active"><a href="#">交换机</a></li>
  152.             <li><a href="#">路由器</a></li>
  153.             <li><a href="#">传送网</a></li>
  154.             <li><a href="#">WLAN</a></li>
  155.             <li><a href="#">SDN控制器</a></li>
  156.             <li><a href="#">无线局域网</a></li>
  157.         </ul>
  158.     </div>
  159.  
  160.     <!-- 手机端产品分类展示 -->
  161.     <div class="row mobile">
  162.         <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  163.           <div class="panel">
  164.             <div class="panel-heading clearfix" role="tab">
  165.                 <li><a href="#">所有产品</a></li>
  166.                 <a class="category_arrow" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true">
  167.                     <span class="glyphicon glyphicon-menu-down"></span>
  168.                 </a>
  169.             </div>
  170.             <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
  171.               <div class="panel-body">
  172.                     <ul class="product_category product_category_mobile clearfix">
  173.                         <li class="active"><a href="#">交换机</a></li>
  174.                         <li><a href="#">路由器</a></li>
  175.                         <li><a href="#">传送网</a></li>
  176.                         <li><a href="#">WLAN</a></li>
  177.                         <li><a href="#">SDN控制器</a></li>
  178.                         <li><a href="#">无线局域网无线局域网无线局域网</a></li>
  179.                     </ul>
  180.               </div>
  181.             </div>
  182.           </div>
  183.         </div>
  184.     </div>
  185. </div>
  186.  
  187. </body>
  188. <script src="jquery/jquery.min.js"></script>
  189. <script src="bootstrap/bootstrap.min.js"></script>
  190. <script type="text/javascript">
  191.  
  192. </script>
  193. </html>

bootstrap的折叠组件1的更多相关文章

  1. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

  2. 利用bootstrap的modal组件自定义alert，confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  3. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  4. bootstrap 之 列表组件使用

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  5. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  6. bootstrap课程5 bootstrap中的组件使用的注意事项是什么

    bootstrap课程5 bootstrap中的组件使用的注意事项是什么 一.总结 一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...

  7. Bootstrap Blazor Table 组件（二）

    原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...

  8. 【BootStrap】 布局组件 I

    BootStrap布局组件 I 除了在原生的HTML基础上进行了外观和类别上的改进,BS还包装了很多组件进库中,设计网页时我们可以方便地调用这些组件.下面来简略地介绍一下各种各样的组件 ■ 字体图标 ...

  9. bootStrap树形目录组件

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用.车型一共有4级目录.要使用目录树.然后分活动和商品两种,需要能够通过不通参数来调用该组件.车型品牌要使用 ...

随机推荐

  1. 【zznu-夏季队内积分赛3-F】学无止境

    题目描述 “别人总说我瓜,其实我一点也不瓜,大多数时候我都机智的一批“ACM程序设计竞赛是一个团体项目.宝儿姐作为其中优秀的一份子,每天好好学习天天向上.曾经宝儿姐给自己定了一个计划,刷穿bzoj.于 ...

  2. 拒绝了对对象 'sp_OACreate' (数据库 'mssqlsystemresource'，架构 'sys')的 EXECUTE 权限。

    执行一个存储过程, 由于里面使用到了一些 --创建对象  EXEC sp_OACreate 'VBScript.RegExp', @objRegex OUT  --设置属性  EXEC sp_OASe ...

  3. jfreechart 在jsp页面显示所画的图片（resin服务器的servelet配置是关键）（图片只过内存）

    用的web服务器是resin服务器,在配置web.xml时需要注意,其实resin服务器的web.xml服务器配置和tomcat服务器的配置很像, 1. 我第一次按照自己的想法,想当然的在resin- ...

  4. Device-Dependent Bitmaps (DDB) 设备相关位图

    设备相关的位图(DDB)使用单一结构BITMAP结构描述.该结构的成员指定矩形区域的宽度和高度,以像素为单位;将条目从设备调色板映射到像素的数组的宽度;以及器件的颜色格式,在每个像素的颜色平面和位数方 ...

  5. tomcat的localhost-config is missing 错误的解决方法

    运行项目时报错,错误信息为: The tomcat server configuration at /sever/tomcat v7.0 localhost-config is missing 解决方 ...

  6. .pyc和.pyo文件有何用

    百度知道:http://zhidao.baidu.com/link?url=_tFP1xglFnoEBObWtIArI3b3Ft0PQowx5m5ruIaX3mFIAFVr7vX45Lfb0geCjA ...

  7. [interview]螺旋队列问题

    摘要 本文主要讲解三种螺旋队列的实现方式和打印输出: 从中心往外端顺时针旋转,记为『外螺旋队列』 从左顶点开始,绕剩下的最大圈顺时针往内旋转,记为『内螺旋队列』 从左顶点开始,之字形旋转(只能同行同列 ...

  8. UNIX 基础知识

    登陆       1.登录名            系统在其 口令文件(通常是/etc/passwd文件) 中查看用户名,口令文件中包含了有关用户的信息.       2.shell          ...

  9. linux 一些有用的命令

    新增软链接 ln -s /usr/local/python27/bin/python2.7 /usr/bin/python 新建目录/递归 mkdir ./{nginx,memcached,httpd ...

  10. 【angular之起步】安装

    人生只有眼前的苟且. 所以为了远方,最近在策划一个大阴谋------做一个自己的网站,杂而全的. 各种胡思乱想了一周,先把页面写完了,没辙,就这个不用费太多脑子. 然后开始重头戏,就卡死了. angu ...