<!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. Python 10.1

  2. HR#4 题解

    既然考这么差就来写题啦OTZ T1 猜结论?猜nm! 一直到考试结束都没猜出来=.=我就好奇别人如何猜出来的 我们来说DP(from ZBK) 设\(dp[i][j]\)表示胜or负 那我们来看一下代 ...

  3. window.open全屏显示

    将window.open(url,'','height=600,width=910,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes,resizabl ...

  4. Gym - 102307G Graduation 拓扑排序

    Gym - 102307G Graduation  题意:xjl得修够n门课才能毕业,其中有些课是某门课的先行课,并且他精力有限,每学期最多只能修k门课,问xjl最少需要多少学期才能毕业. 首先,正向 ...

  5. apt update时出现签名无法验证，公钥失效的解决办法

    错误信息如下 W: GPG error: http://ppa.launchpad.net/ondrej/php/ubuntu xenial InRelease: The following sign ...

  6. Kafka详细原理

    Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...

  7. 解决Android Studio 打开Flutter 项目，找不到设备的问题

    开始设置了ANDROID_HOME环境变量后,发现Flutter 识别不了安卓SDK, 使用命令配置发现配置是失败的,貌似是不支持路径里有空格 复制一份SDK到没有空格的路径后,SDK就能识别了,并且 ...

  8. Hadoop环境搭建|第四篇：hive环境搭建

    一.环境搭建 注意:hive版本不能太高,否则会出现兼容性问题 1.1.上传hive安装包 创建文件夹用于存放hive文件命令:mkdir hive 1.2.解压hive安装包 命令:tar -zxv ...

  9. java课后实验性问题1

    一.一个java类文件中只能有一个公有类吗? 测试代码 public class Test{ public static void main(String[] args){ } public clas ...

  10. DataFactory生产身份证号码==

    生产身份证号:定义数据类型为CHAR()类型的才能进行数据的组合