Bootstrap插件-collapse

時間  2019-12-12
標籤 bootstrap 插件 collapse 欄目 Bootstarp 简体版
原文   原文鏈接 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>聲明式觸發手風琴</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>body {
        padding: 10px;
        margin: 10px
    }</style>
</head>
<body>
<!--觸發手風琴能夠經過自定義的 data-toggle 屬性來觸發。其中data-toggle值設置爲 collapse，data-target="#摺疊區標識符"-->
<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <!--定義data-parent屬性，實現點擊一個其中一個元素時，關閉全部的摺疊區，再打開所單擊的區域（若是所單擊區域是展現的，則會關閉）-->
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">標題一</a>
            </h4>
        </div>
        <!--在Bootstrap框架中，若是你想讓內容區域不可視，只須要在 panel-collapse 樣式上添加 collapse-->
        <div class="panel-collapse collapse in" id="panel1"><!--in初始選定狀態-->
            <div class="panel-body">摺疊區內容</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <!--爲了把標題和內容區捆綁在一塊兒，能夠經過錨連接的方法，把標題區域和麪板區連在一塊兒-->
                <a href="#panel2" data-toggle="collapse" data-target="#panel2" data-parent="#myAccordion">標題二</a>
                <!--a標籤能夠省去data-target，由於href中已經聲明，button就必須使用data-target自定義標籤了-->
            </h4>
        </div>
        <div class="panel-collapse collapse" id="panel2">
            <div class="panel-body">摺疊區內容</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel3" data-toggle="collapse" data-target="#panel3" data-parent="#myAccordion">標題三</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="panel3">
            <div class="panel-body">摺疊區內容</div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程