javascript - Bootstrap 侧边菜单 : Collapse, 在小屏幕上最小化

Question

我正在查看这个主题，它完全符合我正在寻找的内容(边栏明智):http://themesdesign.in/webadmin_1.1/layouts/green/index.html

1. 我想要扩展/最小化边栏的菜单按钮，同时仍保留所有边栏菜单。

2. 在 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/ “折叠成图标的左侧边栏”部分有我要找的东西。然而，问题在于，当它折叠成图标时，它不显示任何菜单子(monad)项。

Answer 1

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

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

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

例如，如果您希望它关闭，您可以将一个 closed 类添加到您的侧边栏，并使用以下命令向下层叠您的 closed css:

.closed .child-element {}

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