Jestem początkującego z JavaScript i zmagam się, aby moje linki w menu faktycznie zamknąć po kliknięciu. Wiem, że odpowiedź może być bardzo prosta, ale jeszcze nie mogę tego zrozumieć; /

Oto mój kod JavaScript:

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.4s ease forwards ${
          index / 9 + 0.4
        }s`;
      }
    });

    // Burger Animation
    burger.classList.toggle("toggle-1");
  });
};

navSlide();

Dziękuję z góry i doceniam jakąkolwiek pomoc, jaką możesz mi pożyczyć.

2
HUFHADES 21 listopad 2020, 20:54

1 odpowiedź

Najlepsza odpowiedź

Zaznaczyłem kodu z komentarzem "Nowe linie" linie Kode, które dodałem. Mam nadzieję, że to dla ciebie działa

function 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.4s ease forwards ${
                  index / 9 + 0.4
                }s`;
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle-1");
    });

    // NEW LINES ----------------------------------
    // Get all "a" tags in ".nav-links" element
    var list_a = nav.getElementsByTagName('a');
    // Add EventListener on all "a" tags in ".nav-links" element
    for (var i = 0; i < list_a.length; i++) {
        list_a[i].addEventListener("click", function () {
            // When click on link script click on burger close link
            burger.click();
        });
    }
    // END NEW LINES ----------------------------------
}

navSlide();
1
54ka 21 listopad 2020, 20:47