Bootstrap的js外掛程式之摺疊（collapse）

最後更新：2017-08-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：一個世界 bootstra pop 初始化 mod post viewport item

data-toggle="collapse"——指明該元素具有摺疊功能；

data-target——設定元素開啟摺疊後指向的元素連結。

.collapse——用來設定元素為摺疊內容。

.in——設定摺疊內容初始化為顯示狀態；

.panel-collapse——指明該元素內容為摺疊面板樣式。

很多其它細節請參考示範範例：

<!DOCTYPE html><html lang="zh_CN"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width,initial-scale=1">    <title>飯盒兒——發現身邊不一樣的世界</title>    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">    <script src="js/jquery-2.1.3.min.js"></script>    <script src="js/bootstrap.min.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->    <style>    </style></head><body><div class="container">   <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">點擊查看</a>    <div class="collapse" id="collapseExample">        <div class="well">            Hello world        </div>    </div>    <hr/>    <div class="panel-group" id="accordion" role="tablist">        <div class="panel panel-default">            <div class="panel-heading" role="tab" id="headingOne">                <h4 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>                </h4>            </div>            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">                <div class="panel-body">                    這真是一個奇妙的網站                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading" role="tab" id="headingTwo">                <h4 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item2</a>                </h4>            </div>            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">                <div class="panel-body">                    這真是一個奇妙的網站2                </div>            </div>        </div>        <div class="panel panel-default">            <div class="panel-heading" role="tab" id="headingThree">                <h4 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item3</a>                </h4>            </div>            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">                <div class="panel-body">                    這真是一個奇妙的網站3                </div>            </div>        </div>     </div></div><script>//    $("#accordion").on('hidden.bs.collapse',function(){//        alert("隱藏了");//    })</script></body></html>

Bootstrap的js外掛程式之摺疊（collapse）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More