8.10.3 使用JS触发折叠元素
Bootstrap
为触发折叠元素提供了一个collapse()
方法,该方法有如下三种用法。
- 不传参数:直接使用
collapse()
方法相当于初始化data-*
属性,因此通常无须调用不带参数的collapse
方法。
- 传字符串参数:调用
collapse()
方法时可传入'toggle'
、'show'
、'hide'
等字符串参数,其中:
'toggle'
字符串用于切换折叠元素的显示和隐藏;
'show'
字符串用于显示折叠元素;
'hide'
字符串用于隐藏折叠元素。
- 传入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'
表示隐藏折叠元素。
原文链接: 8.10.3 使用JS触发折叠元素