Bootstrap 手风琴（点击手风琴应该关闭其他手风琴）

Question

我当前的手风琴功能是，当我们点击“+”号时，它会打开手风琴并使其保持打开状态，即使我们点击了其他手风琴的“+”号。

我需要的是点击一个手风琴，其他打开的手风琴应该关闭。 下面是我的 Codepen 链接。

<aside class="col-md-4">
 <section class="sidebar-tools">
  <h4 class="my-4">My</h4>
   <nav>
      <a class="tile-link" data-toggle="collapse" href="#myDoctor">
       My 
      </a>
      <div class="collapse sidebar-collapse" id="myDoctor">
       <a href="#" class="sidebar-collapse-link">Viewr</a>
       <a href="#" class="sidebar-collapse-link">Change</a>
      </div>
     <a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
      <div class="collapse sidebar-collapse" id="IDcards">
       <a href="#" class="sidebar-collapse-link">View</a>
       <a href="#" class="sidebar-collapse-link">Change </a>
     </div>
       <a class="tile-link" href="#">nformation</a>
      <a class="tile-link" href="#"> Estimator</a>
   </nav>
   <h4 class="my-4">My Tools</h4>
    <nav>
    <a class="tile-link" href="#">Cards</a>
     <a class="tile-link" href="#">Enformation</a>
     <a class="tile-link" href="#"> Estimator</a>
    </nav>
    </section>
  </aside>

谢谢 CodePen

Answer 1

您可以通过在您的链接中使用data-parent 来实现这一点，这是带有您的代码的 sn-p

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

.sidebar-tools a {
  color: white;
}

a.tile-link {
  text-decoration: none;
}

.tile-link {
  -js-display: flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2980b9;
  padding: 10px;
  margin: 2px 0;
}
.tile-link:hover {
  background-color: #2980b9;
}
.tile-link[data-toggle]:after {
  content: '\f067';
  font-family: 'fontawesome';
  transition: all .25s ease-in-out;
  float: right;
}
.tile-link[aria-expanded="true"]:after {
  transform: rotate(45deg);
}

.sidebar-collapse {
  background-color: #95a5a6;
  margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
  color: white;
  display: block;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>


<aside class="col-md-4" id="myGroup">
 <section class="sidebar-tools">
  <h4 class="my-4">My</h4>
   <nav>
      <a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
       My 
      </a>
      <div class="collapse sidebar-collapse" id="myDoctor">
       <a href="#" class="sidebar-collapse-link">Viewr</a>
       <a href="#" class="sidebar-collapse-link">Change</a>
      </div>
     <a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
      <div class="collapse sidebar-collapse" id="IDcards">
       <a href="#" class="sidebar-collapse-link">View</a>
       <a href="#" class="sidebar-collapse-link">Change </a>
     </div>
       <a class="tile-link" href="#">nformation</a>
      <a class="tile-link" href="#"> Estimator</a>
   </nav>
   <h4 class="my-4">My Tools</h4>
    <nav>
    <a class="tile-link" href="#">Cards</a>
     <a class="tile-link" href="#">Enformation</a>
     <a class="tile-link" href="#"> Estimator</a>
    </nav>