Question

我目前的手风琴功能是当我们点击＆＃39; +＆＃39;签署它打开手风琴并打开它，即使我们点击了＆＃39; +＆＃39;其他手风琴的标志。

我需要的是点击一支手风琴其他开放式手风琴应该关闭。下面是我的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>

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

1 个答案: