Bootstrap 侧边菜单：在小屏幕上折叠、最小化答案

【问题标题】：Bootstrap Side Menu: Collapse, Minimize on small screenBootstrap 侧边菜单：在小屏幕上折叠、最小化
【发布时间】：2017-07-30 23:07:26
【问题描述】：

我正在看这个主题，它完全符合我的要求（侧边栏）：http://themesdesign.in/webadmin_1.1/layouts/green/index.html

我想要扩展/最小化侧边栏的菜单按钮，同时仍保留所有侧边栏菜单。
当它在 XS 屏幕中时，我希望侧边栏隐藏，但在按下该菜单按钮时会弹出。

这是我目前的代码：

<nav class="navbar-default navbar-static-side" role="navigation">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  <div class="sidebar-collapse hidden-xs">
    <ul class="nav navbar-collapse collapse" id="side-menu">
      <li class="nav-header">
        <h2 style="color: #e8e8e8"></h2>
        <h6 class="" style="color:#808080;">By: </h6>
      </li>
      <li>
        <a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
        <ul class="side-menu-ul collapse in" id="firstMenu">
          <li><a href="index-2.html">Dashboard v.1</a></li>
          <li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li>
          <li><a href="dashboard_3.html">Dashboard v.3</a></li>
          <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
          <li><a href="dashboard_5.html">Dashboard v.5 </a></li>
        </ul>
      </li>
      <li>
        <a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a>
        <ul class="side-menu-ul collapse" id="secondMenu">
          <li><a href="mail-inbox.html">Inbox</a></li>
          <li><a href="mail-compose.html">Compose Mail</a></li>
          <li><a href="mail-single.html">Single Mail</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

没有太多设计经验，我不太确定如何从这里着手。尤其是单击按钮最小化侧导航栏的部分。有人可以帮助我吗？

编辑：我刚刚在这里找到了另一个很好的例子：http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/“折叠为图标的左侧边栏”部分有我正在寻找的内容。但是，问题在于，当它折叠为图标时，它不显示任何菜单子项。

【问题讨论】：

标签： javascript html css twitter-bootstrap navbar

【解决方案1】：

当点击按钮时，您可以使用点击事件来更新应用程序的状态。

https://developer.mozilla.org/en-US/docs/Web/Events/click

由于您要使用侧边栏从一种 CSS 状态切换到另一种状态，因此最好的选择可能是在 CSS 中创建这两种解决方案。这样您就可以通过按钮的onclick 事件更改父容器类。

例如，如果您希望它关闭，您可以在侧边栏中添加一个 closed 类，并使用以下方法让您的 closed css 向下级联：

.closed .child-element {}

以关闭状态的子元素为目标。

【讨论】：