单击菜单项时需要帮助关闭侧边栏/拉导航菜单

Question

我有一个响应式网站，其中包含默认关闭（屏幕外）的导航滑块。这包括一个在屏幕上始终可见的垂直推/拉条，用于打开和关闭菜单。整个导航滑块固定在页面上，菜单上有滚动条。

在较小的设备上打开菜单时，它会占用 100% 的视口宽度。为了适应这一点，我还为 100vh 的正文内容添加了一个顶部边距，以将其推离底部。当用户单击菜单项时，它应该将他们带到链接并自动关闭菜单。我正在尝试使用菜单项上的事件侦听器来做到这一点。如果单击，它将删除在菜单打开时控制显示的active 类。目前，它会将用户带到链接，但不会关闭菜单。

我知道事件侦听器（在某种程度上）有效，因为如果我将正文更改为 display:none 而不是 margin-top:vh，单击菜单项会关闭菜单，但是当然，它不会占用用户到链接。我知道这是因为在单击链接之前显示正文内容，这就是为什么我尝试使用margin-top 而不是display 来处理这个问题。

我错过了什么？我已经搜索了这个问题的答案，但我似乎找不到任何可以解决这个特定问题的东西。我对 JavaScript 非常缺乏经验，因此非常感谢任何帮助。

$(document).ready(function() {
  var mquery = window.matchMedia("(max-width:767.98)");
  $('#toggle-bar').on('click', function() {
    $('#sidebar').toggleClass('active');
  });
  if (mquery.matches) {
    $('.menu-item').on('click', function() {
      $('#sidebar').removeClass('active');
    });
  }
});

.sidebar {
  display: flex;
  width: 100%;
  position: fixed;
  max-height: 100vh;
  margin-left: calc(-100% + 25px);
  /*to keep .sidebar-toggle in the view*/
}

.sidebar.active {
  margin-left: 0;
}

.sidenav {
  overflow-y: scroll;
}

.sidebar-toggle {
  width: 25px;
}

.sidebar #navpush {
  display: none;
}

.sidebar.active #navpush {
  display: inline;
}

.sidebar.active #navpull {
  display: none;
}

.body-content {
  padding: 15px;
}

.sidebar.active~.body-content {
  margin-top: 100vh;
}

<div class="container body-wrapper">
  <aside class="sidebar" id="sidebar">
    <nav class="sidenav">
      <ul id="main-nav">
        <li><a href="#section1" class="menu-item">Section 1</a></li>
        <li><a href="#sect1nav" class="dropdown-toggle" data-toggle="collapse">Section 1</a>
          <ul id="sect1nav" class="collapse submenu">
            <li><a href="#section2a" class="menu-item">Section 2A</a></li>
            <li><a href="#section2b" class="menu-item">Section 2B</a></li>
          </ul>
        </li>
        <li><a href="#section3" class="menu-item">Section 3</a></li>
      </ul>
    </nav>
    <div class="toggle-bar" id="toggle-bar">
      <div id="nav-toggle">
        <span id="navpush">&laquo;</span>
        <span id="navpull">&raquo;</span>
      </div>
    </div>
  </aside>
  <div class="container body-content">
    <div id="section1">
      <h2>Section 1 Title</h2>
      <div>
        <!-- Content -->
      </div>
    </div>
    <div id="section2">
      <h2>Section 2 Title</h2>
      <div id="section2a">
        <h3>Section 2A Title</h3>
        <div>
          <!-- Content -->
        </div>
      </div>
      <div id="section2b">
        <h3>Section 2B Title</h3>
        <div>
          <!-- Content -->
        </div>
      </div>
    </div>
    <div id="section3">
      <h2>Section 2 Title</h2>
      <div>
        <!-- Content -->
      </div>
    </div>
  </div>
</div>

Answer 1

该问题是由于媒体查询中缺少单位引起的：

固定代码（注意末尾添加“px”）：

var mquery = window.matchMedia("(max-width:767.98px)");

预编辑：您的 HTML 标记不包含 ID 为“sidebar”（#sidebar）或“toggle-bar”（#toggle-bar）的元素。