可折叠边栏菜单 - 引导程序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>