如何在移动设备上默认折叠侧边栏

Question

我从 Envato 元素购买了 Lexa 引导管理仪表板。但我面临一个问题。在移动视图上，侧边栏默认不折叠。 Metis Menu 用于侧边栏。但是，如果我们单击切换按钮，它会通过将class 添加到正文enlarged 来折叠侧边栏，有人可以帮我解决这个问题。谢谢你:)

侧边栏

<div class="left side-menu">
  <div class="slimscroll-menu" id="remove-scroll">

      <!--- Sidemenu -->
      <div id="sidebar-menu">
          <!-- Left Menu Start -->
          <ul class="metismenu" id="side-menu">
              <li class="menu-title">Main</li>
              <li>
                  <a href="index.html" class="waves-effect">
                      <i class="mdi mdi-view-dashboard"></i><span class="badge badge-primary badge-pill float-right">2</span> <span> Dashboard </span>
                  </a>
              </li>
              <li>
                  <a href="calendar.html" class="waves-effect"><i class="mdi mdi-calendar-check"></i><span> Calendar </span></a>
              </li>

              -------------------------

          </ul>

      </div>
      <!-- Sidebar -->
      <div class="clearfix"></div>

  </div>
  <!-- Sidebar -left -->

</div>

Answer 1

您可以在较小的屏幕上通过javascript添加enlarged类。

if (window.innerWidth < 960) {
    document.querySelector("body").classList.add('enlarged')
}