Javascript 引导手风琴表现怪异
产品规格部分工作正常。当我点击组1时，它显示，当我点击组2时，它将最小化组1并显示组2 问题是接下来的两个类别，使用和安装以及保养都没有做孔手风琴的事情。如果我点击第一组，然后点击第二组，这两个都会最大化，它不会像ti那样最小化第一组Javascript 引导手风琴表现怪异,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,产品规格部分工作正常。当我点击组1时，它显示，当我点击组2时，它将最小化组1并显示组2 问题是接下来的两个类别，使用和安装以及保养都没有做孔手风琴的事情。如果我点击第一组，然后点击第二组，这两个都会最大化，它不会像ti那样最小化第一组 <div class="tab-content"> <!--Product Specs--> <hr> <h3 style="text-align: left;">Product Specs&
<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-->
产品规格
第1组信息
第2组信息
第三组信息
用法
第1组信息
第2组信息
第三组信息
安装和维护
第1组信息
第2组信息
第三组信息
jFIDLE Link您的所有面板组都具有相同的id 尝试将id=accordion更改为id=accordion 1、id=accordion 2和id=accordion 3
产品规格
第1组信息
第2组信息
第三组信息
用法
第1组信息
第2组信息
第三组信息
Installati