Bootstrap手风琴悬浮下拉框，直接拷~~~

发布时间：2020-12-17 21:28:45 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtml lang= " en " head meta charset= " UTF-8 " titleTitle/titlescript 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/boo

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!