8.10.3 使用JS触发折叠元素

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

8.10.3 使用JS触发折叠元素

Bootstrap为触发折叠元素提供了一个collapse()方法,该方法有如下三种用法。

  1. 不传参数:直接使用collapse()方法相当于初始化data-*属性,因此通常无须调用不带参数的collapse方法。
  2. 传字符串参数:调用collapse()方法时可传入'toggle'、'show'、'hide'等字符串参数,其中:
    • 'toggle'字符串用于切换折叠元素的显示和隐藏;
    • 'show'字符串用于显示折叠元素;
    • 'hide'字符串用于隐藏折叠元素。
  3. 传入JS对象作为参数:JS对象可支持parent和toggle两个属性,其中parent属性可以是false或CSS选择器,
    • 如果parent被指定为false(默认值),则表示该方法仅对当前折叠元素起作用;
    • 如果parent被指定为CSS选择器,则表示该方法会影响该选择器对应容器所包含的全部子元素:当一个面板显示时,其他面板都隐藏(手风琴效果)。

程序示例

下面代码示范了使用JS触发折叠元素。

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
<!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">
        <button class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('toggle');">
            切换</button>
        <button class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('show');">
            展开</button>
        <button class="btn btn-primary" type="button" onclick="$('#myDiv').collapse('hide');">
            隐藏</button>
        <!-- 可折叠元素 -->
        <div class="collapse" id="myDiv">
            <div class="well">
                疯狂Java讲义是一本必读的Java学习经典。
            </div>
        </div>
    </div>
</body>

</html>

在这段代码中定义了3个按钮,这3个按钮都没有通过data-*属性来触发折叠效果,而是通过JS代码调用折叠元素的collapse()方法来实现折叠效果。调用该方法时:

  • 传入'toggle'表示切换隐藏和显示效果;
  • 传入'show'表示显示折叠元素;
  • 传入'hide'表示隐藏折叠元素。