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

Question

您好，

当用户单击菜单图标时，我有一个工作导航栏滑出页面。它仅显示在网站的移动版本上。

当你想关闭栏时，你点击“x”或 div 之外，在后台某处。

当我单击某个部分名称时，页面刷新并且导航关闭。单击当前部分时出现问题。页面不刷新，需要手动关闭导航

我希望我的导航栏在用户每次单击 link 时关闭。你知道我怎样才能做到这一点吗？

这是我的网站：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>
    </div></a>
    <a href="advices.php#indexmain"><div class="dropdown-content-item">
        <div class="dropdown-content-item-icon">
            <img width="15px" height="20px" src="img/Advices2_icon_white.png">
        </div>
        <div class="dropdown-content-item-text">
            <p class="lang" key="advices">Pomoc / Porady</p>
        </div>
    </div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
    
</div>

这是我的 css 这部分：

.menu-mobile {
    display: block;
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: -255px;
    background-color: rgba(100,100,100,1);
    overflow-x: hidden;
    transition: 0.4s;
}

.menu-mobile-close {
    position: absolute;
    top: 5px;
    right: 10px;
    transition: 0.05s;
}

.menu-mobile-background {
    right: 0;
    top: 0;
    position: fixed;
    overflow: hidden;
    z-index: 9998;
    width: 0px;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.menu-mobile-header {
    min-width: 250px;
    padding: 16px;
    text-align: center;
    background-color: white;
}

.menu-mobile-header p {
    font-family: Open Sans;
    font-size: 14px;
    color: rgba(100,100,100,1);
    padding: 2px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

.menu-mobile-header img {
    margin: 0 auto;
    height: 65px;
    padding-bottom: 6px;

}

.menu-mobile-close p:hover {
    color: rgba(240,240,240,1);
    cursor: pointer;
}

.menu-mobile-close p {
    font-family: Open Sans;
    font-size: 18px;
    color: rgba(100,100,100,1);
    font-weight: 600;
    display: block;
}

这是我这部分的 JS：

 function openNav() {
        document.getElementById("menu-mobile").style.right = "0px";
        document.getElementById("menu-mobile-background").style.width = "100%";
    }

    function closeNav() {
        document.getElementById("menu-mobile").style.right = "-255px";
        document.getElementById("menu-mobile-background").style.width = "0px";
    }

这是我的导航栏图片：

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    
  })
});

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

Navigation bar - not closing when clicking the current section

javascript

html

css

nav