Bootstrap Collapse的使用

1、效果图：

2、当点击B或C时，A自动收缩：

3、html代码：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
												<div class="panel panel-default">
													<div class="panel-heading" role="tab" id="headingOne">
														<h4 class="panel-title">
															<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
																A
															a>
														h4>
													div>
													<div id="collapseOne" class="panel-collapse  collapse in" role="tabpanel" aria-labelledby="headingOne">
														<ul class="list-group">
															<li class="list-group-item">1li>
															<li class="list-group-item">2li>
															<li class="list-group-item">3li>
														ul>
													div>
												div>

												<div class="panel panel-default">
													<div class="panel-heading" role="tab" id="headingTwo">
														<h4 class="panel-title">
															<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
																B
															a>
														h4>
													div>
													<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
														<ul class="list-group">
															<li class="list-group-item">1li>
															<li class="list-group-item">2li>
															<li class="list-group-item">3li>
														ul>
													div>
												div>

												<div class="panel panel-default">
													<div class="panel-heading" role="tab" id="headingThree">
														<h4 class="panel-title">
															<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
																C
															a>
														h4>
													div>
													<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
														<ul class="list-group">
															<li class="list-group-item">1li>
															<li class="list-group-item">2li>
															<li class="list-group-item">3li>
														ul>
													div>
												div>
											div>
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

其中最关键的是：data-parent=“#accordion”、aria-expanded=“true”、class=“panel-collapse collapse in”
（1）data-parent=“#accordion”：它指定的当前折叠框是在哪个下边，就是类似于分组，是指的在哪个分组下，该分组指定了ID（