<!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. layer 漂亮的弹窗

    layer.confirm('<font color="red">请认真核对账目信息,提交后将不可撤回!!</font>', { icon:3, title ...

  2. sublime的一些记录

    { "keys": ["tab"], "command": "reindent", "context" ...

  3. spring+mybatis事务的readonly属性无效

    在Spring配置事务中设置的read-only="true"不起作用,仍可以执行写操作:但是其他的正常.查看了一下DataSourceTransactionManager这个类的 ...

  4. Qt：使用Model-View，动态的加载显示数据

    共有 main.cpp, Widget.h, Widget.cpp, Widget.ui, MyModel.h, MyModel.cpp 六个文件. 可从此下载整个工程文件: /Files/biao/ ...

  5. 我的新书，ArcGIS从0到1，京东接受预定，有160个视频，851分钟

     我的新书,ArcGIS从0到1,京东接受预定,8月08日至08月16日发货https://item.jd.com/53669213250.html当当网 http://product.dangdan ...

  6. 查看memcache版本

    window: cmd中用telnet 127.0.0.1 11211这样的命令连接上memcache,然后直接输入stats就可以得到memcache服务器的版本. 注意:memcache的默认端口 ...

  7. How to Publish a NuGet Package

    How to Publish a NuGet Package Command line To push packages to nuget.org you must use nuget.exe v4. ...

  8. leetcode 79. Word Search 、212. Word Search II

    https://www.cnblogs.com/grandyang/p/4332313.html 在一个矩阵中能不能找到string的一条路径 这个题使用的是dfs.但这个题与number of is ...

  9. Flask实现跨域请求的处理方法

    https://blog.csdn.net/wangshu_liang/article/details/86490137 https://blog.csdn.net/a1241314660/artic ...

  10. Qt osg QWidget osgViewer::Viewer

    osgViewer::Viewer* _viewer = nullptr; _viewer = new osgViewer::Viewer;osg::ref_ptr<osg::Group> ...