单击链接时关闭导航覆盖（一个寻呼机）

Question

在我网站的移动版本上，我有一个汉堡包图标，当使用 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>这是 Javascript（用于打开/关闭导航）：function menu(x) {   x.classList.toggle("change");   }   function openNav() {        document.getElementById("myNav").style.height = "100%";    }    function closeNav() {        document.getElementById("myNav").style.height = "0%";    }这是 jQuery（用于平滑滚动）：$(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;      });    }  });});

Answer 1

您可以添加onclick="closeNav();"到所有链接。

Answer 2

好的，所以我认为最好选择使用完整的 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;

       });

     }

  });

});