侧边栏在桌面上默认打开，在移动设备上关闭

Question

我在尝试让我的侧边栏/导航内容（使用 Bootstrap）在桌面上默认显示（展开）并在移动设备上默认关闭并且图标仅在移动设备上显示时遇到了一些真正的麻烦。我似乎无法让它工作。

 <nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>

我曾尝试使用此 javascript 代码，但无济于事：

  $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });

原文由 Frank Doe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来这已经在这里得到回答： https ://stackoverflow.com/a/36289507/378779 基本上，将 navbar-expand-* 类之一添加到您的 <nav> ，例如：

 <nav class="menu menu-open navbar-expand-md" id="theMenu">

原文由 kmoser 发布，翻译遵循 CC BY-SA 4.0 许可协议