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

Question

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

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

我知道事件侦听器有效（在某种程度上），因为如果我将 body 更改为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）的元素。