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

时间:2017-05-24 22:26:30

标签: html css twitter-bootstrap-3

如何从下面创建可折叠子菜单?我尝试过的只是将下面的项目直接映射而不会折叠。

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>

1 个答案:

答案 0 :(得分:2)

如果您使用的是bootstrap,则可以这样做!

&#13;
&#13;
    $('.nav-second').on('show.bs.collapse', function () {
        $('.nav-second.in').collapse('hide');
    });
&#13;
<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>
&#13;
&#13;
&#13;