引导程序列表组：将两个或多个列表组与一个活动选择组合在一起

Question

目前，我正在尝试结合Bootstrap accordion和list group with JS behaviour。因此，我得到了一组列表组。每个都只能有一个活动选项。相反，我希望每个手风琴只有一个主动选项。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <div class="accordion col-4" id="accordionVentures">
        <div class="card">
          <div class="card-header" id="heading1000">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000"> 
            Baauw
            </button>
          </div>

          <div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
            <div class="card-body">
              <div class="list-group"  id="list-tab1000" role="tablist">
                  <a class="list-group-item list-group-item-action" id ="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen"  role="tab" data-toggle="list">Vlaardingen</a>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="heading2000">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000"
                    aria-expanded="true" aria-controls="collapse2000" >
              Blauwhoff
            </button>
          </div>

          <div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
            <div class="card-body">

              <div class="list-group"  id="list-tab2000" role="tablist">
                  <a class="list-group-item list-group-item-action" id ="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div>
      <div class="tab-content" id="nav-tabContent1000">
          <div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
      </div>
      <div class="tab-content" id="nav-tabContent2000">
          <div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
      </div>
    </div>

The jsfiddle link with proper bootstrap interpretation

UPD：所以我现在所拥有的是：

步骤1。按下其中一个按钮

步骤2。转到另一只手风琴，再按一个按钮

我希望那里只有一个选择：

Answer 1

您的实施很好。只是那个年轻人错过了Aalsmeer按钮上的data-toggle="list"。我又添加了2-3个按钮，以使效果更加明显和清晰。

您将必须通过jquery从所有active show元素中删除.list-group-item类。

$(".list-group-item").on('click', function() {
  $(".list-group-item").each(function(index) {
    $(this).removeClass("active show");
  });
})

$(".list-group-item").on('click', function() {
  $(".list-group-item").each(function(index) {
    $(this).removeClass("active show");
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="accordion col-4" id="accordionVentures">
  <div class="card">
    <div class="card-header" id="heading1000">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000"> 
            Baauw
            </button>
    </div>

    <div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
      <div class="card-body">
        <div class="list-group" id="list-tab1000" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen" role="tab" data-toggle="list">Vlaardingen</a>
          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading2000">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000" aria-expanded="true" aria-controls="collapse2000">
        Blauwhoff
      </button>
    </div>

    <div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
      <div class="card-body">

        <div class="list-group" id="list-tab2000" role="tablist">
          <a class="list-group-item list-group-item-action" id="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
          <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <div class="tab-content" id="nav-tabContent1000">
    <div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
    <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Messages</div>
    <div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
    <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Profile</div>
    <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Settings</div>

  </div>
  <div class="tab-content" id="nav-tabContent2000">

  </div>

</div>