Question

当我在网站的移动版本中单击其中一个菜单项时，我无法让导航栏消失。我知道这里已经有类似问题的问题，但大多数解决方案都使用 jquery，而且我对 javascript 真的很陌生，所以我遇到了问题：/ 我真的很感激这方面的一些帮助，我在我的智慧结束了！

问题：在移动设备中，我有一个菜单按钮，可以打开带有我的菜单项的全屏导航栏。单击该按钮效果很好，它使导航栏出现和消失。但是，当单击其中一个链接时，它会滚动到页面上的正确位置，但导航栏保持打开状态。我尝试向菜单项添加一个事件监听器，就像菜单按钮一样，但这根本不起作用......

代码如下：

HTML

<nav>
      <div class="logo">
        <a href="#"
          ><img
            src="./images/original_white.png"
            alt="disco milk logo"
            width="300px"
            height="auto"
            class="logo-still"
        /></a>
      </div>
      <div class="menunav">
        <ul class="nav-links">
          <li>
            <a href="#about">about us</a>
          </li>
          <li><a href="#say-hello">say hello!</a></li>
        </ul>
        <div class="burger">
          <img
            src="./images/menu_icon.png"
            alt="menu icon"
            class="burger-icon"
          />
        </div>
      </div>
    </nav>

CSS

nav {
    width: 100vw;
    padding-left: 37px;
    padding-right: 37px;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: 100vh;
    width: 100vw;
    background-color: #231f20;
    z-index: 1;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    justify-content: center;
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    padding: 10px;
    opacity: 0;
  }

  .nav-active {
    transform: translateX(0%);
  }

和JS

const navSlide = ()=>{
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
    
    burger.addEventListener('click', ()=>{
        // Toggle Nav
        nav.classList.toggle('nav-active');
        // Animate Links
        navLinks.forEach((link, index)=>{
            if(link.style.animation){
            link.style.animation = '';
            } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`;
            }
        });
        //Burger Animation
        burger.classList.toggle('toggle');

    });


}

navSlide();

我真的很感谢任何帮助！！非常感谢:)

Answer 1

// insert this after your js variables
document.querySelectorAll(".nav-links li a").forEach(item => {
    item.addEventListener('click', ()=>{
        // Toggle Nav
        nav.classList.toggle('nav-active');
    });
});
// I think you get the idea

单击菜单项时关闭导航栏

1 个答案: