摺疊/取消折疊所有菜單項。 - 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'); 
    });