可折叠的侧边栏菜单-Bootstrap 3 / HTML

Question

How can I create collapsible sub menus from the below? What ever I try just maps the items directly below with no collapsing.

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

Code with side bar menu overlay.

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

If you are using bootstrap, you can do it in this way!

  $('.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>