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

如果您使用的是bootstrap，则可以这样做！

＆＃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;

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

1 个答案: