我正在尝试用Bootstrap创建一个手风琴。我的目的是点击一个标题，让它打开并关闭面板而不会影响其他面板。
在这种情况下，当我打开面板1和2/3并单击关闭2或3时，面板1最终会关闭，而不应该受到影响。
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Experience -->
<section class="container experience">
<div class="row">
<h2>Heading</h2>
<div class="col-md-3">
<span>lorem </span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h3 class="panel-title">Title1</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of accordion -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>blah</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h3 class="panel-title">Title2</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<h3 class="panel-title">Title3</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li> </ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3">
<span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
</section>
<!-- end of experience -->
此外，如何在页面加载时默认关闭手风琴？
答案 0 :(得分：1)
删除data-parent属性以断开彼此之间的关联，如果您希望它们开始关闭，请移除in from class="panel-collapse collapse"。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Experience -->
<section class="container experience">
<div class="row">
<h2>Heading</h2>
<div class="col-md-3"> <span>lorem </span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h3 class="panel-title">Title1</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of accordion -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>blah</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<a role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h3 class="panel-title">Title2</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
<div class="row">
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 1st column -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<a role="button" data-toggle="collapse" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<h3 class="panel-title">Title3</h3>
</a>
</div>
<!-- end of panel title -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul>
<li>Lorem ipsum</li>
</ul>
</div>
<!-- end of panel body -->
</div>
<!-- end of panel collapse -->
</div>
<!-- end of panel default -->
</div>
<!-- end of middle column -->
<div class="col-md-3"> <span>lorem</span>
</div>
<!-- end of 3rd column -->
</div>
</section>
<!-- end of experience -->