すべてのメニュー項目を折りたたむ/折りたたむ。 - HTML/JS/CSS/Bootstrap3

Question

左は私のコードがしていること、右は私がしたいことです。メニュー項目をクリックするときれいに崩壊しますが、私は望むならば後でそれらを折りたたむことができ、すべてを崩壊させたいと思っています。

$('.nav-second').on('show.bs.collapse', function() { 
     $('.nav-second.in').collapse('hide'); 
    }); 

HTML

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div id="sidebar-wrapper"> 
    <ul class="sidebar-nav"> 
     <li class="sidebar-brand"></li> 
     <li> 
      <a href="main.html"><i class="material-icons">home</i></a> 
     </li> 
     <li> 
      <a href="#overall" data-toggle="collapse" aria expanded="false">Overall </a> 
      <ul id="overall" class="nav-second collapse"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#dashboard" data-toggle="collapse" aria expanded="false">Dashboard </a> 
      <ul id="dashboard" class="nav-second collapse"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#service" data-toggle="collapse" aria expanded="false">Service </a> 
      <ul id="service" class="nav-second collapse"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
      </ul> 
     </li> 
     <li> 
    </ul> 

Answer 1

あなたは、このアプローチが必要な場合は、単にそのjQueryのコードを削除します。

私はこの1つを意味する：

$('.nav-second').on('show.bs.collapse', function() { 
     $('.nav-second.in').collapse('hide'); 
    });