<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

            .box{

                width: 400px;

                height: 600px;

                margin-top: 100px;

            }

        </style>

</head>

<body>

        <div class="container box">

            <div class="panel-group">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title"> 

                            <a href="#ding" data-toggle="collapse" data-parent="#accordion">订单管理</a>

                        </h4>

                    </div>

                    <div id="ding" class="panel-collapse collapse in">

                        <div class="panel-body">

                            <ul class="nav">

                                <li>

                                    <a href="#">衣服管理</a>

                                </li>

                                <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="#hui"  data-toggle="collapse" data-parent="#accordion">会员管理</a>

                        </h4>

                    </div>

                    <div id="hui" class="panel-collapse collapse">

                        <div class="panel-body">

                            <ul class="nav">

                                <li>

                                    <a href="#">衣服管理</a>

                                </li>

                                <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="#cai"  data-toggle="collapse" data-parent="#accordion">财务管理</a>

                        </h4>

                    </div>

                    <div id="cai" class="panel-collapse collapse">

                        <div class="panel-body">

                            <ul class="nav">

                                <li>

                                    <a href="#">衣服管理</a>

                                </li>

                                <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中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. [Luogu P4145] 上帝造题的七分钟2 / 花神游历各国

    题目链接 题目简要:我们需要一个能支持区间内每一个数开方以及区间求和的数据结构. 解题思路:说道区间修改区间查询,第一个想到的当然就是分块线段树.数据范围要用long long.本来我是看到区间这两个 ...

  2. 016_STM32程序移植之_舵机

    STM32程序移植之舵机PWM测试 接线图如下: STM32引脚 舵机引脚 功能 GND GND 正极电源 具体看舵机的额定电压 PA6 PWM引脚 STM32引脚 CH340引脚 GND GND 3 ...

  3. 通过无线网络使用ADB ( Connect to android with ADB over TCP )

    之前用USB数据线连接电脑和android手机,用adb操控手机. 后来电脑前面板的USB全坏了,键盘.鼠标.USBKkey.打印机都需USB,  少一个USB口,只得对不常用设备进行插拔切换. 于是 ...

  4. 【概率论】4-6:协方差和相关性(Covariance and Correlation)

    title: [概率论]4-6:协方差和相关性(Covariance and Correlation) categories: - Mathematic - Probability keywords: ...

  5. 自己实现dup2

    转自 http://blog.csdn.net/todd911/article/details/11747097 #include <stdio.h> #include <unist ...

  6. c++ 使用类生成随机数

    // generate algorithm example #include <iostream> // cout #include <algorithm> // genera ...

  7. c标签forEach

    <c:forEach items="${requestScope.getUserMenuModelList}" var="item" varStatus= ...

  8. Linux下 Java 读取文件路径

    一般文件路径在windows中用 \ 表示,但是在其他系统平台下比如linux中就不是 \ 所以java给我们提供了一个与平台无关的表示路径的常量 File.separator在windows中则表示 ...

  9. vue实战_从头开始搭建vue工程

    写在前面:vue工程入口文件分析 /index.html,/src/main.js,/src/APP.vue /index.html文件示例: <!DOCTYPE html> <ht ...

  10. 方阵转置（c++）

    #include #include using namespace std; int main(int argc,char* argv[]) { int a[4][4]={ {0,1,2,3}, {4 ...