jquery - 单击链接时，响应式侧边栏不会关闭

Question

我使用查询、html 和 css 构建了一个侧边栏。当侧边栏被激活并且覆盖出现在其余内容上并且使用 overflow: hidden 阻止滚动时。基本上，当我单击侧边栏中的链接并被重定向时，当我单击后退时，侧导航仍然处于事件状态/可见状态，我希望侧边栏在我单击喜欢或单击屏幕上的任意位置时消失。请问有人可以帮忙吗？

$(document).ready(function() {
$menuTrigger = $(".menu-trigger");
$sideNav = $(".side-nav");

$menuTrigger.click(function() {
$(this).toggleClass("active");
$(".content").toggleClass("overlay");
$("body").toggleClass("body-fixed");
$sideNav.toggleClass("slide-out");
});
});

<!-- SIDE NAV -->
<nav class="side-nav">
<div class="side-nav-inner">
 <ul class="main-menu">
   <li class="menu-item">
     <a href="">Home</a>
   </li>
   <li class="menu-item">
     <a href="">About Us</a>
   </li>
   <li class="menu-item">
     <a href="">Rooms</a>
   </li>
   <li class="menu-item">
     <a href="">Contact Us</a>
   </li>
   <li class="menu-item">
     <a href="">Book Now</a>
   </li>
 </ul>      

Answer 1

从您询问的声音来看，您希望叠加层和侧边栏关闭，以便在访问者单击浏览器的后退按钮时不可见。

如果是这种情况，您将需要捕获对链接的点击，隐藏叠加层/边栏然后将用户重定向到该 URL。

$(document).ready(function(){
  $(document).on("click",".menu-item a",function(e){
    e.preventDefault();
    $(".content").toggleClass("overlay");
    $("body").toggleClass("body-fixed");
    $sideNav.toggleClass("slide-out");
    location.href = this.href;
  });
});