<!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. BZOJ 3218 A + B Problem (可持久化线段树+最小割)

    做法见dalao博客 geng4512的博客, 思路就是用线段树上的结点来进行区间连边.因为有一个只能往前面连的限制,所以还要可持久化.(duliu) 一直以来我都是写dinicdinicdinic做 ...

  2. P4317 花神的数论题 动态规划？数位DP

    思路:数位$DP$ 提交:5次(其实之前A过,但是调了调当初的程序.本次是2次AC的) 题解: 我们分别求出$sum(x)=i$,对于一个$i$,有几个$x$,然后我们就可以快速幂解决. 至于求个数用 ...

  3. jQuery.proxy(function,context)

    jQuery.proxy(function,context) 概述 jQuery 1.4 新增.返回一个新函数,并且这个函数始终保持了特定的作用域.大理石平台检定规程 当有事件处理函数要附加到元素上, ...

  4. JavaMail使用SMTP协议发送电子邮件(详解)

    Properties props = new Properties(); props.setProperty("mail.transport.protocol", "sm ...

  5. 让JPA的Query查询接口返回Map对象

    在JPA 2.0 中我们可以使用entityManager.createNativeQuery()来执行原生的SQL语句. 但当我们查询结果没有对应实体类时,query.getResultList() ...

  6. Oracle 11g关闭用户连接审计

    sys.aud$表数据量增长较快.这时,不想关闭数据库的审计,但是又不想频繁的清理sys.aud$表.可进行如下操作关闭数据库连接的审计 noaudit connect;

  7. 牛客 17439：Endless Pallet

    题目传送门 算法:min-max 容斥.树上背包.NTT. 题意简述 有一棵 \(n\) 个点的树.一开始所有点都是白色,每次操作会随机选择 \(\frac{n \times (n + 1)}{2}\ ...

  8. xgzc— math 专题训练（二）

    费马小定理&欧拉定理 费马小定理: 如果\(p\)是一个质数,而整数\(a\)不是\(p\)的倍数,\(a^{p-1}\equiv1\pmod p\) 欧拉定理: 当\(a\)与\(n\)互质 ...

  9. SIGCHLD函数

    SIGCHLD的产生条件 子进程终止时 子进程接收到SIGSTOP信号停止时 子进程处在停止态,接受到SIGCONT后唤醒时 借助SIGCHLD信号回收子进程 子进程结束运行,其父进程会收到SIGCH ...

  10. 5分钟记住列表的使用功能－Python基础前传（7）

    学习任何一门技术,最重要的是逻辑而不是内容,仅会内容,我们仅仅是技术的使用者,但如果我们懂得了技术背后的逻辑,我们就是技术的创造者,所以同样领域的工作,有人月入5千,有人月入5万,就是这个差别: 学技 ...