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

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() {&nbsp; &nbsp; $('.menu-mobile a').click(function(e) {&nbsp; &nbsp; &nbsp; &nbsp;e.preventDefault(); // if the link don't reload all the page&nbsp; &nbsp; &nbsp; &nbsp;closeNav();&nbsp; &nbsp; })});另一个解决方案，如果你想在重定向之前等待一些东西：$(document).ready(function() {&nbsp; $('.menu-mobile a').click(function(e) {&nbsp; &nbsp; &nbsp;e.preventDefault(); // is required&nbsp; &nbsp; &nbsp;closeNav();&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;const nextPage = e.currentTarget.href;&nbsp; &nbsp; &nbsp; &nbsp; window.location.href = nextPage;&nbsp; &nbsp; &nbsp; },1000) // set the time here in milliseconds&nbsp; &nbsp;&nbsp;&nbsp; })});