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

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");
    });

Answer 1

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

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

Answer 2

您可以使用 CSS Media Query 在不同的视口/设备上隐藏/显示内容。