产品规格部分的行为正确。当我单击组1时，显示，当我单击组2时，它将最小化组1并显示组2。
问题是接下来的两个类别，“用法”和“安装和保养”不是在打孔手风琴的事情。如果单击组1，然后组2最大化两个组，则不会像ti那样最小化组1。
<div class="tab-content">
<!--Product Specs-->
<hr>
<h3 style="text-align: left;">Product Specs</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Product Specs
<!--Usage-->
<hr>
<h3 style="text-align: left;">Usage</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--End of Usage-->
<!--Installation and care-->
<hr>
<h3 style="text-align: left;">Installation & Care</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Installation & Care-->
当我单击第2组和第3组中的任何内容时。它将最小化组1？
jfiddle链接jfiddle link
最佳答案
尝试这个
<div class="tab-content">
<!--Product Specs-->
<hr>
<h3 style="text-align: left;">Product Specs</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Product Specs
<!--Usage-->
<hr>
<h3 style="text-align: left;">Usage</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--End of Usage-->
<!--Installation and care-->
<hr>
<h3 style="text-align: left;">Installation & Care</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Installation & Care-->