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

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(){&nbsp; let isOpen = false; //=========> use a flag to toggle navbar&nbsp; function navToggle(){&nbsp; &nbsp; //Click event for Nav&nbsp; &nbsp; $("#myNav").on('click', function(event) {&nbsp; &nbsp; &nbsp;if(!isOpen){&nbsp; &nbsp; &nbsp; &nbsp;isOpen = !isOpen;&nbsp; &nbsp; &nbsp; &nbsp;$(this).css("height", "100%");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;}else{&nbsp; &nbsp; &nbsp; &nbsp;isOpen = !isOpen;&nbsp; &nbsp; &nbsp; &nbsp;$(this).css("height", "0%");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; });&nbsp; }&nbsp; //Click event for Nav Links&nbsp; $("a").on('click', function(event) {&nbsp; &nbsp; &nbsp;//Call nav to toggle&nbsp; &nbsp; &nbsp;isOpen = true;&nbsp; &nbsp; &nbsp;navToggle();&nbsp; &nbsp; &nbsp;if (this.hash !== "") {&nbsp; &nbsp; &nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp;var hash = this.hash;&nbsp; &nbsp; &nbsp; &nbsp;$('html, body').animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scrollTop: $(hash).offset().top&nbsp; &nbsp; &nbsp; &nbsp;}, 800, function(){&nbsp; &nbsp; &nbsp; &nbsp; window.location.hash = hash;&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;}&nbsp; });});