导航栏 - 单击当前部分时不关闭

Question

你好，当用户单击菜单图标时，我有一个工作导航栏滑出页面。它仅显示在网站的移动版本上。当您想关闭栏时，您可以单击背景中某处的“x”或 div 外部。当我单击某个部分名称时，页面会刷新并且导航会关闭。单击当前部分时出现问题。该页面不会刷新，因此您必须手动关闭导航。我希望我的导航栏在用户每次单击链接时关闭。你知道我怎样才能做到这一点吗？这是我的网站： https: //www.poznanprzeprowadzki.pl这是我这部分的 html：<div id="menu-mobile" class="menu-mobile">    <div class="menu-mobile-close" onclick=closeNav()>        <p>x</p>    </div>    <div class="menu-mobile-header">        <img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>        <p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>    </div>    <a href="index.php#indexmain"><div class="dropdown-content-item">        <div class="dropdown-content-item-icon">            <img width="20px" height="20px" src="img/Home_icon_white.png">        </div>        <div class="dropdown-content-item-text">            <p class="lang" key="home">Strona główna</p>        </div>    </div></a>    <a href="about.php#indexmain"><div class="dropdown-content-item">        <div class="dropdown-content-item-icon">            <img width="20px" height="20px" src="img/About_icon_white.png">        </div>        <div class="dropdown-content-item-text">            <p class="lang" key="about">O nas</p>        </div>    </div></a>    <a href="gallery.php#indexmain"><div class="dropdown-content-item">        <div class="dropdown-content-item-icon">            <img width="20px" height="15px" src="img/Gallery_icon_white.png">        </div>        <div class="dropdown-content-item-text">            <p class="lang" key="gallery">Galeria</p>        </div>    </div></a>    <a href="contact.php#indexmain"><div class="dropdown-content-item">        <div class="dropdown-content-item-icon">            <img width="20px" height="15px" src="img/Contact_icon_white.png">        </div>        <div class="dropdown-content-item-text">            <p class="lang" key="contact">Kontakt</p>        </div>

Answer 1

将此脚本添加到您的 js 文件中：

$(document).ready(function() {

    $('.menu-mobile a').click(function(e) {

       e.preventDefault(); // if the link don't reload all the page

       closeNav();

    })

});

另一个解决方案，如果你想在重定向之前等待一些东西：

$(document).ready(function() {

  $('.menu-mobile a').click(function(e) {

     e.preventDefault(); // is required

     closeNav();

      setTimeout(() => {

         const nextPage = e.currentTarget.href;

        window.location.href = nextPage;

      },1000) // set the time here in milliseconds    

  })

});