Question

在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>

Answer 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/

Answer 2

因为您有三种不同的手风琴，根据您的问号标签的纯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');
});

摘录：

＆＃13;

/**
$('[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');
            }
        })
    });
})

＆＃13;

<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>

＆＃13;

Answer 3

这个答案假设你使用的是Bootstrap 3。

您需要做的是将所有面板放在一个公共包装器下，由一些id引用。然后，您将此ID放入用于打开和关闭面板的data-parent标记的<a>属性中。此外，您的HTML还包含一些错误，例如href标记的<a>属性不包含他们应控制的小组的ID（infoPanel而不是panel1）和由于某种原因<a>类的collapsed标签。

这是一个基于您的代码的JSFiddle：Click。重要的部分是#collapse-group包装器以及data-parent属性。有关详情，请参阅Bootstrap docs

Bootstrap：如何在单击另一个面板时使面板自动折叠？

3 个答案: