javascript - Bootstrap : How to make panels auto collapse when clicking on another panel?

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 Accordion 的概念有误:您现在拥有三个单独的 Accordion ，每个 Accordion 都有一个面板(#accordion1、#accordion2、#accordion3)。如果您希望其他面板在单击其中一个面板时折叠，那么它们都应该属于同一个父折叠面板(由 data-parent 属性引用)。另外，请确保使用所有必要的 aria- 和 data- 属性，并引用正确的标题/面板子 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/