在Bootstrap中，如何在单击另一个面板时使面板自动折叠，以便一次只打开一个面板？我不擅长JavaScript。
以下是一些示例代码：
<div class="footer-widget-panel panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#infoPanel">Information</a></h4>
</div>
<div id="panell" class="panel-collapse collapse">
<div class="panel-body">
Panel 1
</div>
</div>
</div>
</div>
<div class="footer-widget-panel panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#infoPanel">Information</a></h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Panel 2
</div>
</div>
</div>
</div>
<div class="footer-widget-panel panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#infoPanel">Information</a></h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Panel 3
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
我认为你的Bootstrap手风琴的概念是错误的：你现在有三个独立的手风琴，每个手风琴都有一个面板（＃accordion1，＃accordion2，＃accordion3）。如果您希望其他面板在单击其中一个面板时折叠，它们都应属于同一个父手风琴（由data-parent属性引用）。此外，请务必使用所有必需的咏叹调和数据属性，并参考正确的标题/面板子ID。例如：
<div class="footer-widget-panel panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#panel1" aria-expanded="true" aria-controls="panel1">Information</a></h4>
</div>
<div id="panel1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#panel2" aria-expanded="false" aria-controls="panel2">Information</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#panel3" aria-expanded="false" aria-controls="panel3">Information</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Panel 3
</div>
</div>
</div>
</div>
JSFiddle：https://jsfiddle.net/x2bph14h/
答案 1 :(得分：1)
因为您有三种不同的手风琴，根据您的问号标签的纯JavaScript中的解决方案是：
document.querySelectorAll('[id^=accordion]').forEach(function(ele, idx) {
ele.addEventListener('click', function (e) {
var currTarget = this.querySelector('.panel-collapse.collapse');
document.querySelectorAll('[id^=accordion] .panel-collcollapse').forEach(function(ele, idx) {
if (ele != currTarget) {
ele.classList.remove('in');
ele.setAttribute('aria-expanded', 'false');
}
})
});
})
虽然jQuery中的简单解决方案是：
$('[id^=accordion]').on('show.bs.collapse', function (e) {
$('[id^=accordion] .panel-collapse.collapse').not(e.target).collapse('hide');
});
摘录：
/**
$('[id^=accordion]').on('show.bs.collapse', function (e) {
$('[id^=accordion] .panel-collapse.collapse').not(e.target).collapse('hide');
});
**/
document.querySelectorAll('[id^=accordion]').forEach(function(ele, idx) {
ele.addEventListener('click', function (e) {
var currTarget = this.querySelector('.panel-collapse.collapse');
document.querySelectorAll('[id^=accordion] .panel-collapse.collapse').forEach(function(ele, idx) {
if (ele != currTarget) {
ele.classList.remove('in');
ele.setAttribute('aria-expanded', 'false');
}
})
});
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer-widget-panel panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#infoPanel1">Information</a></h4>
</div>
<div id="infoPanel1" class="panel-collapse collapse">
<div class="panel-body">
Panel 1
</div>
</div>
</div>
</div>
<div class="footer-widget-panel panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#infoPanel2">Information</a></h4>
</div>
<div id="infoPanel2" class="panel-collapse collapse">
<div class="panel-body">
Panel 2
</div>
</div>
</div>
</div>
<div class="footer-widget-panel panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion3" href="#infoPanel3">Information</a></h4>
</div>
<div id="infoPanel3" class="panel-collapse collapse">
<div class="panel-body">
Panel 3
</div>
</div>
</div>
</div>
答案 2 :(得分：0)
这个答案假设你使用的是Bootstrap 3。
您需要做的是将所有面板放在一个公共包装器下，由一些id引用。然后，您将此ID放入用于打开和关闭面板的data-parent标记的<a>属性中。此外，您的HTML还包含一些错误，例如href标记的<a>属性不包含他们应控制的小组的ID（infoPanel而不是panel1）和由于某种原因<a>类的collapsed标签。
这是一个基于您的代码的JSFiddle：Click。重要的部分是#collapse-group包装器以及data-parent属性。有关详情，请参阅Bootstrap docs