可摺疊邊欄菜單 - 引導程序3/HTML

Question

如何從下面創建可摺疊子菜單？我試過的任何東西都只是直接映射下面的項目而不會崩潰。

Overall Site 
     ------Item 1 
     ------Item 2 
     ------Item 3 
Dashboards 
     ------Item 1 
     ------Item 2 
     ------Item 3 
Services 
     ------Item 1 
     ------Item 2 
     ------Item 3 

代碼與側欄菜單覆蓋。

<!-- Sidebar --> 
     <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> 
      <br> 
      <br> 
      <li> 
       <a href="">Overall Site</a> 
      </li> 
      <li> 
       <a href="">Dashboards</a> 
      </li> 
      <li> 
       <a href="">Services</a> 
      </li> 
      <li> 
     </ul> 
     </div> 

Answer 1

如果您使用引導，您可以這樣做！

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <!-- 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> 
 
     </div>