1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  7. <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  8. <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9.  
  10. <style>
  11. .box{
  12. width: 400px;
  13. height: 600px;
  14. margin-top: 100px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <div class="container box">
  21. <div class="panel-group">
  22.  
  23. <div class="panel panel-default">
  24. <div class="panel-heading">
  25. <h4 class="panel-title"> 
  26. <a href="#ding" data-toggle="collapse" data-parent="#accordion">订单管理</a>
  27. </h4>
  28. </div>
  29. <div id="ding" class="panel-collapse collapse in">
  30. <div class="panel-body">
  31. <ul class="nav">
  32. <li>
  33. <a href="#">衣服管理</a>
  34. </li>
  35. <li>
  36. <a href="#">鞋子管理</a>
  37. </li>
  38. <li>
  39. <a href="#">水果管理</a>
  40. </li>
  41. <li>
  42. <a href="#">蔬菜管理</a>
  43. </li>
  44. <li>
  45. <a href="#">电脑管理</a>
  46. </li>
  47. </ul>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="panel panel-default">
  52. <div class="panel-heading">
  53. <h4 class="panel-title"> 
  54. <a href="#hui"  data-toggle="collapse" data-parent="#accordion">会员管理</a>
  55. </h4>
  56. </div>
  57. <div id="hui" class="panel-collapse collapse">
  58. <div class="panel-body">
  59. <ul class="nav">
  60. <li>
  61. <a href="#">衣服管理</a>
  62. </li>
  63. <li>
  64. <a href="#">鞋子管理</a>
  65. </li>
  66. <li>
  67. <a href="#">水果管理</a>
  68. </li>
  69. <li>
  70. <a href="#">蔬菜管理</a>
  71. </li>
  72. <li>
  73. <a href="#">电脑管理</a>
  74. </li>
  75. </ul>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="panel panel-default">
  80. <div class="panel-heading">
  81. <h4 class="panel-title"> 
  82. <a href="#cai"  data-toggle="collapse" data-parent="#accordion">财务管理</a>
  83. </h4>
  84. </div>
  85. <div id="cai" class="panel-collapse collapse">
  86. <div class="panel-body">
  87. <ul class="nav">
  88. <li>
  89. <a href="#">衣服管理</a>
  90. </li>
  91. <li>
  92. <a href="#">鞋子管理</a>
  93. </li>
  94. <li>
  95. <a href="#">水果管理</a>
  96. </li>
  97. <li>
  98. <a href="#">蔬菜管理</a>
  99. </li>
  100. <li>
  101. <a href="#">电脑管理</a>
  102. </li>
  103. </ul>
  104. </div>
  105. </div>
  106. </div>
  107.  
  108. </div>
  109. </div>
  110. </body>
  111. </html>

Bootstrap手风琴悬浮下拉框,直接拷~~~的更多相关文章

  1. bootstrap中selectpicker下拉框使用方法实例

    最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接, ...

  2. bootstrap 多级联动下拉框

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  3. bootstrap可编辑下拉框jquery.editable-select

    搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接: http://pan.baidu.com/s/1kUXvwlL      pas ...

  4. Bootstrap Search Suggest 下拉框模糊查询

    源码地址:https://github.com/lzwme/bootstrap-suggest-plugin 有时间会完善!暂时有点忙!

  5. MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框

    1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...

  6. iOS: 悬浮的条件筛选下拉框的使用

    1.介绍 app中条件筛选视图是很常用的功能,一般它搭配着tableView的表头悬浮滚动使用,点击按钮时,就会弹出下拉框显示条件,选择一个条件后,下拉框自动隐藏. 2.效果图如下 从中间点击弹出,然 ...

  7. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  8. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  9. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

随机推荐

  1. zhengrui集训D1-D5笔记

    Day_1 计数 它咕掉了 Day_1 序列数据结构 它咕掉了 Day_2 线性代数 高斯消元\Large{高斯消元}高斯消元 普通版:略 模质数:求逆 模合数:exgcd 逆矩阵\Large{逆矩阵 ...

  2. The method format(String, Object[]) in the type String is not applicable for the arguments

    今天,我弟遇到一个有意思的错误~ 程序: package com.mq.ceshi1; public class StringFormat { public static void main(Stri ...

  3. 27、AOP-AOP功能测试

    27.AOP-AOP功能测试 AOP : [动态代理]指程序运行期间动态的将某段代码切入到制定方法位置进行运行的编程方式. 导入AOP模块:Spring AOP(spring-aspects) 定义一 ...

  4. Codeforces Round #553 (Div. 2) 【C. Problem for Nazar】

    题目大意: 一开始第一行是 1,第二行是2 4 ,第三行是3 5 7 9 ,类似这样下去,每一行的个数是上一行的个数,然后对这些点从第一个进行编号,问你从[l,r]区间数的和. 思路:分别求出奇数和偶 ...

  5. Educational Codeforces Round 72 (Rated for Div. 2) C题

    C. The Number Of Good Substrings Problem Description: You are given a binary string s (recall that a ...

  6. Laravel 5.8: Automatic Policy Resolution

    Laravel 5.8: Automatic Policy Resolution March 26, 2019 One of the new features in Laravel 5.8 allow ...

  7. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  8. .net Core使用 MongoDB

    1.安装mogodb windows版本下载地址:https://www.mongodb.com/download-center/v2/community 查看mongod.conf文件,找到绑定的I ...

  9. Atcoder ABC 139D

    Atcoder ABC 139D 解法: 等差数列求和公式,记得开 $ long long $ CODE: #include<iostream> #include<cstdio> ...

  10. Jenkins修改显示语言为中文

    1 安装插件 主界面 -> 系统管理 -> 插件管理 -> 可选插件 1.1 安装插件Locale plugin 1.2 安装插件Localization: Chinese(Simp ...