Bootstrap accordion (单击一个accordion会关闭其他accordion)

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链接来实现这一点，以下是您的代码的代码片段

​

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>

​