Question

我目前正忙于一页纸的网站。不幸的是，单击导航链接后，我无法在移动设备上隐藏导航栏。因此，当前滚动到相应的部分后，它覆盖了大部分页面。我已经尝试了其他帖子中发现的一些内容，但无法使其正常工作。希望有人能帮忙！

谢谢，乔西

导航栏

<nav id="navbar">
      <ul id="nav" class="nav navbar">
        <li class="navbar-icon navbar-icon-toggle"><i class="fas fa-bars fa navbar-toggle" ></i></li>
        <li class="nav-logo"><a class="nav-link-logo" href="#page-top" ><img class="logo" src="RG_Logo_Transparent.png" alt=""></a></li>
        <li class="nav-item"><a class="nav-link" href="#about">Over Ons</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Producten & Diensten</a></li>
        <li class="nav-item"><a class="nav-link" href="#review">Klanten</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        <li class="nav-item"><a class="nav-link" href="terms.html">Algemene Voorwaarden</a></li>
      </ul>
    </nav>

移动菜单的Java语言

function classToggle() {
              const navs = document.querySelectorAll('.nav-link')
              navs.forEach(nav => nav.classList.toggle('navbar_toggleShow'));
              }
      document.querySelector('.navbar-icon-toggle').addEventListener('click', classToggle);

我不确定这是否相关，但这是移动菜单的一些CSS

.navbar_toggleShow {
    display: flex;
    font-size: 1.2rem;
    padding-top: 20px;
    position: relative;
    top: -10px;
    z-index: 0;
  }

.nav {
    flex-direction: column;
    transition: background-color 0.4s ease-out;
      -webkit-transition: background-color 0.4s ease-out;
      -moz-transition: background-color 0.4s ease-out;
      -ms-transition: background-color 0.4s ease-out;
      -o-transition: background-color 0.4s ease-out;
      align-items: flex-start;
    padding-bottom: 10px;
  }

单击一页网站上的导航链接后如何隐藏导航栏

0 个答案: