我在使用自举手风琴时遇到了麻烦。我希望手风琴打开一个特定的部分，然后关闭所有其他部分，以便只关注一个手风琴盒。我也有一个嵌套的手风琴，我想这会引起一些问题。
HTML
<div class="panel panel-group" id="accordion">
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
Accordion #1
</a>
</h4>
</div>
<div id="col_1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2">
Accordion #sub1
</a>
</h4>
</div>
<div id="col_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3">
Accordion #sub2
</a>
</h4>
</div>
<div id="col_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4">
Accordion #sub3
</a>
</h4>
</div>
<div id="col_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
Accordion #2
</a>
</h4>
</div>
<div id="col_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
Accordion #3
</a>
</h4>
</div>
<div id="col_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
答案 0 :(得分：2)
在您的标记中，div元素未正确关闭。内手风琴的第二个data-parent属性也是不正确的。我已正确关闭它们，手风琴正在工作。
详细了解Bootstrap Accordion Example并仔细应用。
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1">
Accordion #1
</a>
</h4>
</div>
<div id="col_1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group" id="accordion-inner" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_2">
Accordion #sub1
</a>
</h4>
</div>
<div id="col_2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_3">
Accordion #sub2
</a>
</h4>
</div>
<div id="col_3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="pink panel-heading">
<h4 class="panel-title" style="font-size: 14px;">
<a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_4">
Accordion #sub3
</a>
</h4>
</div>
<div id="col_4" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7">
Accordion #2
</a>
</h4>
</div>
<div id="col_7" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="brown panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8">
Accordion #3
</a>
</h4>
</div>
<div id="col_8" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您的代码中是否有以下脚本和样式？
将这些放入您的HTML或添加到您需要的任何地方，它应该像魅力一样工作。我通过拥有所有代码在我的本地测试，引导代码真的帮助它！
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
答案 2 :(得分：0)
您的孩子手风琴项目没有崩溃，因为您已将data-parent设置为各自的盒子。如果您将accordion-sub的ID应用于.panel-body，然后将data-parent更改为与您相匹配，那么就会实现正常运作。