Javascript 单击链接时关闭导航覆盖（一页）

在我的网站的移动版上，我有一个汉堡包图标，当使用javascript单击时，它会打开一个全屏覆盖。链接是锚链接，因为它是一个单页网站。单击其中一个链接时，当我希望覆盖关闭时，覆盖将保持打开状态

我认为我遇到的问题是因为我已经设置了jQuery代码，所以单击其中一个链接时会出现平滑的滚动效果。这项工作完美无瑕，但覆盖层保持打开状态

因此openNav/closeNav是用javascript设置的，滚动效果是用jQuery设置的。我很难弄明白怎么做

这是我的HTML：

<div id="mobile-navbar">
    <img class="open-nav" src="img/open-nav.png" onclick="openNav()">
    <a href="#1"><img class="logo-mobile" src="img/logo-mobile.png" alt=""></a>
    <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="#1">ABOUT</a>          
            <a href="#2">RIDING AREAS</a>
            <a href="#3">FACILITY</a>
            <a href="#4">PRICING AND SERVICES</a>
            <a href="#5">CONTACT</a>
        </div>
    </div>
</div>

下面是jQuery（用于平滑滚动）：

---

您可以将

onclick=“closeNav（）；”

添加到所有链接中。

好的，所以我认为您最好选择使用完整的js或只使用Jquery。将两者结合起来并不是一个好的实践，因为jquery本身需要大量的开销，因此在某些可以使用jquery的地方使用纯js可能会被视为对另一半不公平

对于纯Jquery：

$(document).ready(function(){

  let isOpen = false; //=========> use a flag to toggle navbar

  function navToggle(){
    //Click event for Nav
    $("#myNav").on('click', function(event) {
     if(!isOpen){
       isOpen = !isOpen;
       $(this).css("height", "100%");            
     }else{
       isOpen = !isOpen;
       $(this).css("height", "0%");  
     }
    });
  }


  //Click event for Nav Links
  $("a").on('click', function(event) {
     //Call nav to toggle
     isOpen = true;
     navToggle();

     if (this.hash !== "") {
       event.preventDefault();
       var hash = this.hash;
       $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function(){
        window.location.hash = hash;
       });
     }
  });
});

---

添加css代码

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    }
  });
});

$(document).ready(function(){

  let isOpen = false; //=========> use a flag to toggle navbar

  function navToggle(){
    //Click event for Nav
    $("#myNav").on('click', function(event) {
     if(!isOpen){
       isOpen = !isOpen;
       $(this).css("height", "100%");            
     }else{
       isOpen = !isOpen;
       $(this).css("height", "0%");  
     }
    });
  }


  //Click event for Nav Links
  $("a").on('click', function(event) {
     //Call nav to toggle
     isOpen = true;
     navToggle();

     if (this.hash !== "") {
       event.preventDefault();
       var hash = this.hash;
       $('html, body').animate({
         scrollTop: $(hash).offset().top
       }, 800, function(){
        window.location.hash = hash;
       });
     }
  });
});