bootstrap 4手风琴没有关闭

Question

我手风琴有问题。它显示确定。但是当我打开手风琴时，我希望其他手风琴能够自动关闭。我不知道为什么这是错的。下面是我的HTML和CSS。我在谷歌搜索了很多，但找不到一个好的解决方案。我希望有人可以帮助我找出问题所在。

非常感谢你

.panel-heading .accordion-toggle:after {
  font-family: FontAwesome;
  content: "\f068";
  float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  float: right !important;
  content: "\f067";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
  <div class="panel-group" id="accordion" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#shapes" aria-expanded="false">
                    Shapes
                </a>
        </h4>
      </div>
      <div id="shapes" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>Line</li>
            <li>Circle</li>
            <li>Rectangle</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#basicshapes" aria-expanded="false">
                    Basic Shapes
                </a>
        </h4>
      </div>
      <div id="basicshapes" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#components" aria-expanded="false">
                    Components
                </a>
        </h4>
      </div>
      <div id="components" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li>Station</li>
            <li>Zone</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

data-parent="#accordion"应该在class="panel-collapse collapse" div而不是锚。

.panel-heading .accordion-toggle:after {
  font-family: FontAwesome;
  content: "\f068";
  float: right;
}

.panel-heading .accordion-toggle.collapsed:after {
  float: right !important;
  content: "\f067";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
  <div class="panel-group" id="accordion" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#shapes" aria-expanded="false">
                Shapes
            </a>
        </h4>
      </div>
      <div id="shapes" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>Line</li>
            <li>Circle</li>
            <li>Rectangle</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#basicshapes" aria-expanded="false">
                Basic Shapes
            </a>
        </h4>
      </div>
      <div id="basicshapes" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" href="#components" aria-expanded="false">
                Components
            </a>
        </h4>
      </div>
      <div id="components" class="panel-collapse collapse" data-parent="#accordion">
        <div class="panel-body">
          <ul>
            <li>Station</li>
            <li>Zone</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Answer 2

你可以添加这样的脚本

   var $myGroup = $('#accordion');
    $myGroup.on('show.bs.collapse','.collapse', function() {
        $myGroup.find('.collapse').collapse('hide');
    });

希望这对你有用