免費(fèi)AI編程助手
Bootstrap 折疊
2018-03-01 19:03 更新
Bootstrap允許我們?cè)诓皇褂胊ccordion標(biāo)記和JavaScript代碼的情況下擴(kuò)展和折疊元素。
通過data屬性擴(kuò)展和折疊
將data-toggle =“collapse”添加到控制器元素（例如按鈕或錨點(diǎn)）以及用于按鈕的data-target或用于錨點(diǎn)的href以自動(dòng)分配可折疊元素的控制。
data-target或href屬性接受CSS選擇器以將折疊應(yīng)用于特定元素。
將類“collapse”添加到可折疊元素。如果你希望它默認(rèn)打開，可添加額外的類“in”。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
p{
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>通過JavaScript擴(kuò)展和折疊元素
我們可以通過JavaScript手動(dòng)擴(kuò)展和折疊單個(gè)元素，使用JavaScript代碼中可折疊元素的“id”或“class”選擇器調(diào)用collapse()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#toggleDemo").collapse("toggle");
});
});
</script>
<style type="text/css">
p{
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse in"><p>
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>選項(xiàng)
以下選項(xiàng)可用于折疊。
| 名稱 | 類型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| parent | 選擇器 | false | 設(shè)置可折疊父級(jí)。 |
| toggle | boolean（布爾值） | true | 在調(diào)用時(shí)切換可折疊元素。 |
折疊的方法
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle-false").click(function(){
$("#myCollapsible").collapse({
toggle: false
});
});
$(".show-btn").click(function(){
$("#myCollapsible").collapse("show");
});
$(".hide-btn").click(function(){
$("#myCollapsible").collapse("hide");
});
$(".toggle-btn").click(function(){
$("#myCollapsible").collapse("toggle");
});
});
</script>
<style type="text/css">
p {
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary toggle-false" value="Toggle False">
<input type="button" class="btn btn-primary show-btn" value="Show Button">
<input type="button" class="btn btn-primary hide-btn" value="Hide Button">
<input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="myCollapsible">
<p>Click on the buttons to see how it works.</p>
</div>
</div>
</body>
</html>事件
我們可以使用折疊的以下事件。
| 事件 | 描述 |
|---|---|
| show.bs.collapse | 當(dāng)調(diào)用show instance方法時(shí)立即觸發(fā)。 |
| shown.bs.collapse | 在動(dòng)畫之后使折疊元素對(duì)用戶可見時(shí)觸發(fā)。 |
| hide.bs.collapse | 當(dāng)hide方法被調(diào)用時(shí)立即觸發(fā)。 |
| hidden.bs.collapse | 在動(dòng)畫之后使折疊元素對(duì)用戶隱藏時(shí)觸發(fā)。 |
以下示例為在可折疊元素的滑動(dòng)轉(zhuǎn)換已完全完成時(shí)顯示日志消息。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myCollapsible").on("hidden.bs.collapse", function(){
console.log("Collapsible element has been completely closed.");
});
});
</script>
<style type="text/css">
p {
background: #F9F9F9;
border: 1px solid #E1E1E8;
margin: 10px 0;
padding: 8px;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Trigger Button HTML -->
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
<!-- Collapsible Element HTML -->
<div id="myCollapsible" class="collapse in"><p>This is a simple example of hidden event. </p></div>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：