Bootstrap练习：可折叠下拉菜单

本文转载自查看原文 2018-10-24 16:32 1229 Frontend-Practice

代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.css">
</head>
<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                   aria-expanded="true" aria-controls="collapseOne">
                    菜单1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                   aria-expanded="false" aria-controls="collapseTwo">
                    菜单2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                   aria-expanded="false" aria-controls="collapseThree">
                    菜单3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
                <p><button>宫爆鸡丁</button></p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.js"></script>
</body>
</html>

View Code

效果：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 折叠下拉菜单 bootstrap多级下拉菜单 Bootstrap 下拉菜单（Dropdowns） Bootstrap--下拉菜单.dropdown Bootstrap之样式风格与下拉菜单 bootstrap——下拉菜单右对齐 Bootstrap下拉菜单和导航栏的使用 bootstrap按钮组下拉菜单使用 Bootstrap按钮式下拉菜单 Bootstrap下拉菜单的使用(附源码文件)--Bootstrap