javascript - 如何使用 bootstrap 3 在移动版本中切换或关闭侧面菜单和导航栏？

Question

我为前端编写了 html 代码，它在 sidemenu 中有所有选项，并且有一个导航选项卡。我想让它移动响应。因此，当网络应用程序在手机中加载时，侧面菜单应该会消失/切换并出现菜单按钮。单击菜单按钮后，所有选项都应显示在一列中。我不知道该怎么做？

以下是导航栏和侧面菜单代码：

<div id="sidebar">
    <header>
      <a href="/"><img src="/images/grumpy-removebg-preview-removebg-preview.png" width="50" height="25"> grumpytext</a>
    </header>
    <ul class="nav">
      <li>
        <a href="#">
          <i class="zmdi zmdi-view-dashboard"></i>
        </a>
      </li>
      <li>
        <a href="/profile">
          <i class="zmdi zmdi-view-dashboard"></i><img src="/images/icon-1961299_1280.png" width="20" height="20">  Dashboard
        </a>
      </li>
      <li id="addtasks">
        <a href="/addtasks">
          <i class="zmdi zmdi-link"></i><img src="/images/plus-removebg-preview.png" width="20" height="20">  Add Task
        </a>
      </li>
      <li>
        <a href="/status" id="status">
          <i class="zmdi zmdi-widgets"></i></i><img src="/images/paper-icon-flat-0.jpg" width="20" height="20">  Status
        </a>
      </li>
      <li  style="height : 120px">
        <a href="/download" id="download">
          <i class="zmdi zmdi-calendar"></i><img src="/images/download.ico" width="20" height="20">  Download
        </a>
      </li>
      <li>
        <a href="#">
          <i class="zmdi zmdi-calendar"></i>
        </a>
      </li>
      <li>
      <a href="/storageClient">
        <i class="zmdi zmdi-info-outline"></i><img src="/images/storage.png" width="20" height="20"> Storage
      </a>
    </li>
      <li>
      <a href="/settingsClients">
        <i class="zmdi zmdi-info-outline"></i></i><img src="/images/freestock_571081924-removebg-preview.png" width="20" height="20"> Settings
      </a>
    </li>
    <li>
      <a href="/logout">
        <i class="zmdi zmdi-info-outline"></i><img src="/images/lock-removebg-preview.png" width="20" height="20"> Logout
      </a>
    </li>
    <li>
      <a href="#">
        <div style="font-size:12px">COPYRIGHT © 2018 - 21 · GRUMPYTEXT.COM,
         ALL RIGHTS RESERVED.</div>
      </a>
    </li>
    </ul>
  </div>
  <!-- Content -->
  <div id="content">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      role = "button" aria-haspopup="true" aria-expanded="true">
                  Hi!  {{user.name}} </a>
                  <ul class="dropdown-menu">
                    <li><a href="/logout">Logout</a></li>
                  </ul>
                </li>

            </ul>
      </div>
    </nav>
...... {{content code}}

下面是移动设备中菜单点击的切换输出。它应该像这样打开。

标签： javascripthtmljquerytwitter-bootstrap-3