8.10 折叠插件

折叠插件可用于控制某个HTML元素的折叠与展开,当该元素被折叠时,该元素就会隐藏起来,该元素所占据的空间也被释放出来;当该元素被展开时,该元素会显示出来。
折叠插件可以非常方便地实现Web页面上流行的手风琴效果。
Bootstrap的折叠插件依赖collapse.js和transition.js库。这两个JS库包含在bootstrap.js或bootstrap.min.js中。

8.10.1 简单折叠效果

被折叠的元素要指定的样式

简单折叠效果可以通过在目标元素上设置如下三个CSS样式来实现。

样式	描述
`.collapse`	隐藏折叠元素。
`.collapsing`	折叠元素在`折叠过程中`应用该`CSS`样式。
`.collapse .in`	折叠元素被显示出来。

控制折叠的元素需要设置的属性

既可通过按钮控制元素的折叠和展开,也可通过链接控制元素的折叠和展开。为了控制元素的折叠和展开,可为按钮或链接指定如下两个属性。

属性描述

data-toggle 将该属性指定为"collapse",表示该按钮或链接可以展开或折叠其他元素,这个属性值是固定的。

href或data-target 通常链接使用href属性,而按钮则使用data-target属性,这两个属性都用于指定要对哪个元素进行折叠和展开。该属性的值可以是任意CSS选择器。

## 程序示例 ##

下面的代码示范了简单的折叠效果。

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 简单折叠效果 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container">
		<!-- data-toggle="collapse"属性表示该链接可以展开或折叠其他元素 -->
		<!-- href="#myDiv"用于指明要展开或折叠的是id为myDiv的元素 -->
		<a class="btn btn-primary" role="button" data-toggle="collapse" href="#myDiv" aria-expanded="true"
			aria-controls="myDiv">
			使用链接控制折叠</a>
		<!-- data-toggle="collapse"属性表示该链接可以展开或折叠其他元素 -->
		<!-- data-target="#myDiv"用于指明要展开或折叠的是ID为myDiv的元素 -->
		<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#myDiv" aria-expanded="true"
			aria-controls="myDiv">
			使用按钮控制折叠</button>
		<!-- 应用collapse样式表示该元素是可折叠的 -->
		<div class="collapse" id="myDiv">
			<div class="well">
				疯狂Java讲义是一本必读的Java学习经典。
			</div>
		</div>
	</div>
</body>

</html>

在这段代码中定义了一个链接和一个按钮,两个元素都被指定了data-toggle="collapse",这意味着该链接和按钮都可用于触发折叠元素。其中链接使用href 属性指定要触发的目标元素,按钮则使用data-target指定要触发的目标元素。

原文链接: 8.10 折叠插件 8.10.1 简单折叠效果