时间戳

首页 > 解决方案 > 导航栏内容不会在移动视图中加载

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

问题描述

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

我曾尝试编辑 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();

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

标签： javascripthtmlcssnavbar

解决方案

看来这if (link.style.animation)条线是这里的问题。您可以尝试打印link.style.visibilityforEach 循环内部，看看我在说什么。

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

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

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

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

这是一个执行此操作的代码笔。

注意：此解决方案假定您只想使用 JS 执行此操作（因为您提到您正在学习）。我建议检查这种事情的CSS 关键帧，因为我相信这会更容易一些。

推荐阅读