8.10 折叠插件 8.10.1 简单折叠效果

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.4k 阅读时长 ≈ 2 分钟

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选择器。

程序示例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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指定要触发的目标元素。