<!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. vs 2017 无法安装任何 nuget package，提示“库没有注册。。。”

    vs 2017 无法安装任何 nuget package,提示“库没有注册(异常来自 HRESULT: 0x8002801D (TYPE_E_LIBNOTREGISTERED))” 各种百度谷歌都没有 ...

  2. SIGAI深度学习第六集 受限玻尔兹曼机

    讲授玻尔兹曼分布.玻尔兹曼机的网络结构.实际应用.训练算法.深度玻尔兹曼机等.受限玻尔兹曼机(RBM)是一种概率型的神经网络.和其他神经网络的区别:神经网络的输出是确定的,而RBM的神经元的输出值是不 ...

  3. 013_Linux驱动之_poll机制

    1. 功能:poll的机制与select相似,与select在本质上没有多大差别.管理多个描写叙述符也是进行轮询,依据描写叙述符的状态进行处理,可是poll没有最大文件描写叙述符数量的限制. 2. 技 ...

  4. java大视频上传实现

    理清思路: 引入了两个概念:块(block)和片(chunk).每个块由一到多个片组成,而一个资源则由一到多个块组成 块是服务端的永久数据存储单位,片则只在分片上传过程中作为临时存储的单位.服务端会以 ...

  5. 蓝牙4.0模块，AT指令集

    一,LED状态 二,蓝牙模块有两种通信模式 1,AT指令模式 2,数据透传模式 三.AT指令程序设计 1.设置模块的名字 void usart3_send_str(char *pbuf) { whil ...

  6. Java集合总结（一）：列表和队列

    java中的具体容器类都不是从头构建的,他们都继承了一些抽象容器类.这些抽象容器类,提供了容器接口的部分实现,方便具体容器类在抽象类的基础上做具体实现.容器类和接口的关系架构图如下: 虚线框表示接口, ...

  7. LOJ3120. 「CTS2019」珍珠 [容斥，生成函数]

    传送门 思路 非常显然,就是要统计有多少种方式使得奇数的个数不超过\(n-2m\).(考场上这个都没想到真是身败名裂了--) 考虑直接减去钦点\(n-2m+1\)个奇数之后的方案数,但显然这样会算重, ...

  8. 整理的 linux常用发行版 openstack images 下载地址

    常见的Linux发行版本官方都提供了用于云环境(如OpenStack)的Image的下载. 发行版 下载地址 fedora 30 http://mirrors.ustc.edu.cn/fedora/r ...

  9. cmake语法入门记录

    刚刚开始学习ROS,打算入机器人的坑了,参考教材是<ROS及其人开发实践>胡春旭编著 机械工业出版社 华章科技出品.本来以为可以按照书上的步骤一步步来,但是,too young to si ...

  10. Java并发指南7：JUC的核心类AQS详解

    一行一行源码分析清楚AbstractQueuedSynchronizer 转自https://www.javadoop.com/post/AbstractQueuedSynchronizer#toc4 ...