Bootstrap 折叠
2018-03-01 19:03 更新
Bootstrap允许我们在不使用accordion标记和JavaScript代码的情况下扩展和折叠元素。
通过data属性扩展和折叠
将data-toggle =“collapse”添加到控制器元素（例如按钮或锚点）以及用于按钮的data-target或用于锚点的href以自动分配可折叠元素的控制。
data-target或href属性接受CSS选择器以将折叠应用于特定元素。
将类“collapse”添加到可折叠元素。如果你希望它默认打开，可添加额外的类“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扩展和折叠元素
我们可以通过JavaScript手动扩展和折叠单个元素，使用JavaScript代码中可折叠元素的“id”或“class”选择器调用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>选项
以下选项可用于折叠。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| parent | 选择器 | false | 设置可折叠父级。 |
| toggle | boolean（布尔值） | true | 在调用时切换可折叠元素。 |
折叠的方法
<!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 | 当调用show instance方法时立即触发。 |
| shown.bs.collapse | 在动画之后使折叠元素对用户可见时触发。 |
| hide.bs.collapse | 当hide方法被调用时立即触发。 |
| hidden.bs.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(){
$("#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>以上内容是否对您有帮助：
更多建议：