在响应式菜单之外单击可以很好地关闭它，但之后不会

Question

当我在菜单外单击时，我正在尝试关闭导航栏并切换汉堡线。 第一次一切正常，但第二次尝试后我无法真正理解发生了什么。

我第二次尝试关闭导航栏时，我的动画函数没有被执行，并且应该切换我的汉堡线的事件定位函数的第二行没有被执行，但是里面的第一行关闭导航的 if 语句确实如此。

当我在导航栏外点击时，它总是关闭，但只有在第二次尝试时才会切换汉堡线。

我的代码在这里https://codepen.io/bunea-andrei/pen/jOBGNgd?editors=1100。

另外，我将在此处留下导致错误的 JavaScript：

请帮忙

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();

Answer 1

每次点击burger 时，您都会添加一个新 mouseup 事件监听器。意思是第二次点击，如果在外面点击，就会调用

burger.classList.toggle("toggle");

两次，这显然会导致问题。