html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>6
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">7
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>9
</head>10
<body>11
12
<div class="panel-group" id="accordion">13
<div class="panel panel-default">14
<div class="panel-heading">15
<h4 class="panel-title">16
<a data-toggle="collapse" data-parent="#accordion" 17
href="#collapseOne">18
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法19
</a>20
</h4>21
</div>22
<div id="collapseOne" class="panel-collapse collapse in">23
<div class="panel-body">24
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 25
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 26
lomo.27
</div>28
</div>29
</div>30
<div class="panel panel-success">31
<div class="panel-heading">32
<h4 class="panel-title">33
<a data-toggle="collapse" data-parent="#accordion" 34
href="#collapseTwo">35
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法36
</a>37
</h4>38
</div>39
<div id="collapseTwo" class="panel-collapse collapse">40
<div class="panel-body">41
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 42
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 43
lomo.44
</div>45
</div>46
</div>47
<div class="panel panel-info">48
<div class="panel-heading">49
<h4 class="panel-title">50
<a data-toggle="collapse" data-parent="#accordion" 51
href="#collapseThree">52
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法53
</a>54
</h4>55
</div>56
<div id="collapseThree" class="panel-collapse collapse">57
<div class="panel-body">58
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 59
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 60
lomo.61
</div>62
</div>63
</div>64
<div class="panel panel-warning">65
<div class="panel-heading">66
<h4 class="panel-title">67
<a data-toggle="collapse" data-parent="#accordion" 68
href="#collapseFour">69
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法70
</a>71
</h4>72
</div>73
<div id="collapseFour" class="panel-collapse collapse">74
<div class="panel-body">75
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java