Skip to main content

Clicking outside the responsive menu closes it down well but afterwards not

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();
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW

Comments