Question

在移动视图中，我的导航栏显示在屏幕的一半上，我试图使它在单击某个项目后就关闭，而不是只能通过单击“ X”来关闭< / p>

我还没有JavaScript方面的经验，我仍在学习，我尝试看过在线教程，但没有成功。

以下是导航栏的HTML：

<nav>
<div class="logo">
  <h4> Example</h4>
</div>
<ul class="nav-links">
  <li><a href="#About">About Us</a></li>
  <li><a href="#Services">Services</a></li>
  <li><a href="#Contact">Contact Us</a></li>
</ul>
<div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
</nav>

这是Javascript：

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');

navLinks.forEach((link, index) => {
  if (link.style.animation) {
    link.style.animation = '';
  } else {
    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 
0.5}s`;
  }
 });
burger.classList.toggle('toggle');

});

}

navSlide();

我希望一旦单击某个项目，导航栏就会关闭，并且能够通过单击“ X”来关闭

Answer 1

我知道帖子较旧，但我找到了解决方案。

按照 Chris G 在评论中的提示并添加更多内容来解决有关链接的问题没有显示出来。这就是这段代码对我的作用：

在 Chris 之后在 Js 中添加关闭导航：

const closeNav = () => {
    nav.classList.toggle('nav-active');
    burger.classList.toggle('toggle');
  }
  navLinks.forEach(link => link.addEventListener('click', closeNav));
}

当您单击链接时，这可能会使导航栏关闭，但对我而言，当我再次单击时，链接没有显示。所以我复制了转换链接的事件，代码如下：

    const closeNav = () => {
        nav.classList.toggle('nav-active');
        burger.classList.toggle('toggle');
        
        //things i added to show the links again

        navLinks.forEach((link,index) => {
            if(link.style.animation) {
                link.style.animation = '';
            }else{
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });
      }
      
      navLinks.forEach(link => link.addEventListener('click', closeNav));
    }

我是 js 的初学者，但希望它可以帮助所有遇到问题的人。

有一个好人：D

单击项目时如何关闭我的导航栏

1 个答案: