javascript - 导航栏内容不会在移动 View 中加载

Question

导航栏内容在移动 View 中加载正常，但是，当从内容中单击链接并尝试再次加载导航栏时，内容不会加载。简而言之，内容只会加载一次，点击后不会再次加载。

我曾尝试编辑 JS，但由于我仍在学习 Web 开发，因此很难。您可以在我创建的代码笔上看到导航栏 https://codepen.io/Jaderianne/pen/MMRpqa

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

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

}

navSlide();

我希望导航栏在单击“汉堡包”时加载内容，即使在单击某些内容之后也是如此。

Answer 1

似乎 if (link.style.animation) 行是这里的问题。您可以尝试在 forEach 循环中打印 link.style.visibility 以了解我在说什么。

每当您打开导航栏时，link.style.animation 都会被设置，并且不会在导航栏关闭时取消设置。

要在您的代码中快速修复此问题 - 无论何时关闭导航，您都需要重置动画属性。用这个替换现有的 closeNav 函数 -

const closeNav = () => {
    nav.classList.toggle('nav-active');
    burger.classList.toggle('toggle');

    // New code
    navLinks.forEach((link, index) => {
      link.style.animation = '';
    });
}

这是一个 codepen就是这样做的。

注意:此解决方案假定您只想使用 JS 执行此操作(因为您提到您正在学习)。我建议查看 CSS keyframes对于这种事情，因为我相信那会更容易一些。