I'm trying to close the nav bar and toggle the burger lines when i click outside the menu . It all works fine the first time but after the second attempt i can't really understand what is going on .
The second time i try to close the nav bar , my function with animations doesn't get executed and also the second line of the event targeting function which should toggle my burger lines doesn't ge executed , but the first line inside the if statement which closes the nav does.
When i click outside the nav bar , it always closes but only at the second attempt toggles the burger lines as well.
My code is here https://codepen.io/bunea-andrei/pen/jOBGNgd?editors=1100 .
Also i'll leave the JavaScript which causes the error here :
Please help
const wrapperSlide = () => {
const burger = document.querySelector(".burger");
const wrapper = document.querySelector(".wrapper");
const wrapperLinks = document.querySelectorAll(".wrapper span");
burger.addEventListener("click", () => {
wrapper.classList.toggle("wrapper-active");
window.addEventListener('mouseup', function (event) {
if (event.target != wrapper && event.target != burger && event.target.parentNode != burger && event.target.parentNode != wrapper) {
wrapper.classList.remove("wrapper-active");
burger.classList.toggle("toggle");
}
});
//Animate Links
wrapperLinks.forEach((link, index) => {
if (link.style.animation) { //if the animantion took place do nothing else do it
link.style.animation = "";
} else {
link.style.animation = `wrapperLinkFade 0.5s ease forwards ${index / 7 + 0.2}s`;
}
});
//Burger Animation
burger.classList.toggle("toggle");
});
}
wrapperSlide();
Comments
Post a Comment