<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>

<body style="margin: 200px;">
      <div class="col-md-4">
        <div class="panel-group" id="accordion">

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#one" data-toggle = "collapse" data-parent = "#accordion">订单管理</a>
</h4>
</div>
                  
                <div class="panel-collapse collapse in" id="one">
                <div class="panel-body">
                 <ul class="nav nav-pills nav-stacked">
                   <li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
                      </ul>
                </div>
                </div>
  
</div>
            
            <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#two" data-toggle = "collapse" data-parent = "#accordion">订单管理</a>
</h4>
</div>
                  
                <div class="panel-collapse collapse" id="two">
                <div class="panel-body">
                 <ul class="nav nav-pills nav-stacked">
                   <li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
<li>
<a href="#">鞋子管理</a>
</li>
                      </ul>
                </div>
                </div>
  
</div>
            
</div>
      </div>
</body>

</html>

bootstrap手风琴折叠的更多相关文章

  1. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  2. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  3. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  4. 全面解析Bootstrap手风琴效果

    触发手风琴可以通过自定义的data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步:设计一个面 ...

  5. javascript实现的手风琴折叠菜单效果

    演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en&qu ...

  6. Bootstrap之折叠（Collapse）插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  7. ⒂bootstrap组件 折叠 基础案例

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

  8. bootstrap的折叠组件1

    官网的例子: http://v3.bootcss.com/javascript/#collapse <div class="panel-group" id="acc ...

  9. bootstrap 手风琴效果

    <!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>按钮插 ...

随机推荐

  1. andorid 菜单 进度条

    activity_ui2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  2. less 官网讲解 （ http://www.bootcss.com/p/lesscss/ ）

    变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS @color: #4D926F; #header { ...

  3. Luogu 3424 [POI2005]SUM-Fibonacci Sums

    Solution 没有任何算法, 只要会$for$ 就能AC... 我们观察到, 如果有一个位置 的$F_i$ 的系数$b_i$ 为2, 那么只需要把 $b_{i-2}+1,b_{i+1}+1$即可. ...

  4. https的名词解释

    原文 http://www.cnblogs.com/guogangj/p/4118605.html 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等) ...

  5. Spring Boot学习笔记：项目开发中规范总结

    Spring Boot在企业开发中使用的很广泛,不同的企业有不同的开发规范和标准.但是有些标准都是一致的. 项目包结构 以下是一个项目常见的包结构 以上是一个项目的基本目录结构,不同的项目结构会有差异 ...

  6. JUC知识点总结图

    转载http://www.jsondream.com/2017/06/12/about-JUC.html

  7. canvas 实现飞碟射击游戏

    var canvas = document.getElementById('canvas'); var cxt = canvas.getContext('2d'); // 射击角度 var ang = ...

  8. python学习 day18 (3月25日)---（ 面向对象浅析）

    面向对象思想: 字典表示对象: 不是太好 因为 变量 得一个个的赋值改值 {'name':'alex','blood':20,'attack':1,'sex':'不'} {'name':'太亮','b ...

  9. php中如何解决显示数据库中的内容乱码

    第一步: 第二步:在代码开始处加一行

  10. 2019.01.13 bzoj4538: [Hnoi2016]网络（树链剖分）

    传送门 树链剖分一眼题. 题意简述: 给定一棵树,有三种操作: 加入一条路径 删除一条已加入的路径 询问不过一个点x的路径的最大值. 思路: 直接树链剖分维护答案. 因为询问的事不过点xxx的最大值, ...