8.10.2 手风琴效果
什么是手风琴效果
手风琴效果:有多个可折叠的元素这些元素在同一时刻只能展开其中一个元素,其他元素折叠.
如何实现手风琴效果
把多个折叠元素组合在同一个.panel-group
元素内即可实现手风琴效果。
实现手风琴效果的步骤
实现手风琴效果的步骤如下:
- 定义一个被指定了
class="panel-group"
样式的<div>
元素,该元素将可以作为手风琴效果的容器。
- 手风琴内每个标签页面都是一个”面板”,因此需要为该面板指定
.panel
、.panel-default
等样式。具体可参考前面有关面板的介绍。
- 在”面板”内添加”面板头”和”面板体”等部分。通常来说,我们应该
将触发折叠的链接放在面板头部分
;
将折叠元素放在面板体内
。
- 为了让面板头中的链接能触发折叠操作,同样需要:
- 为连接指定
data-toggle
属性值总是"collapse"
,这样才有可以展开或折叠其他元素的功能。
- 为链接指定
href
和data-toggle
属性,其中href
属性指定该链接要触发哪个折叠元素,
- 为连接指定一个
data-parent
属性,该属性指定手风琴效果的容器元素。
小结
归纳起来,需要为手风琴效果的链接
或按钮
指定如下属性:
1 2 3
| data-toggle="collapse" data-parent="手风琴容器" data-target="要触发的目标折叠元素"
|
程序示例
如下代码示范了手风琴效果的实现。
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| <!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"> <div class="panel-group" id="accordion"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#java" data-parent="#accordion"> 疯狂Java讲义</a> </h4> </div> <div id="java" class="panel-collapse collapse in"> <div class="panel-body"> <p>必读的Java学习经典,你懂的,不多说。</p> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#javaee" data-parent="#accordion"> 轻量级Java EE企业应用实战</a> </h4> </div> <div id="javaee" class="panel-collapse collapse"> <div class="panel-body"> <p>企业级应用开发的经典图书,畅销经典</p> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#swift" data-parent="#accordion"> 疯狂Swift讲义</a> </h4> </div> <div id="swift" class="panel-collapse collapse"> <div class="panel-body"> <p>Apple公司Swift语言的学习图书</p> </div> </div> </div> </div> </div> </body>
</html>
|
手风琴效果其实是多个简单折叠效果的组合,只要为折叠效果的触发链接额外指定data-parent
属性即可。
原文链接: 8.10.2 手风琴效果