折叠/取消折叠所有菜单项。 - 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代码。

我的意思是这一个：

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