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下拉菜單 bootstrap(4)關於下拉菜單的功能 bootstrap多級下拉菜單 Bootstrap 下拉菜單（Dropdowns） bootstrap：導航下拉菜單 Bootstrap下拉菜單、按鈕式下拉菜單 Bootstrap<基礎十四> 按鈕下拉菜單 BootStrap學習(2)_下拉菜單&按鈕組