菜单汉堡按钮未按预期打开，需要单击两次才能打开而不是单击一次（在移动视图中）

Question

我的网站有问题。最初 menuOpen 的值设置为 false，当我单击它时它工作正常，菜单打开。然后我再次点击关闭它，它工作正常，但 menuOpen 的值没有更新为 false。

我知道问题出在变量 menuOpen 上，但有时它工作正常，所以我真的不知道该怎么做。

对于可能导致问题的原因以及解决方法，您有什么建议吗？谢谢！！

//HTML
<!-- HEADER -->
    <header id="header" class="sticky-navbar">
        <div class="header-container">
            <h1 class="header-logo">
                Olmo Biancardi
                <span class="logo-end">_</span>
            </h1>
            <ul class="header-menu">
                <div id="menu" class="menu">
                    <li class="header-element"><a class="nav-link" href="#section1">About</a></li>
                    <li class="header-element"><a class="nav-link" href="#section2">Skills</a></li>
                    <li class="header-element"><a class="nav-link" href="#section3">Projects</a></li>
                    <li class="header-element"><a class="nav-link" href="#section4">Resume</a></li>
                    <li class="header-element"><a class="nav-link" href="#section5">Contact</a></li>
                </div>
                <div id="menuButton" class="hamburger">
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                </div>
            </ul>
        </div>
    </header>

//CSS
.header-container {
    display: flex;
    min-height: 12vh;
    align-items: center;
    justify-content: space-around;
}
.header-logo {
    letter-spacing: 1px;
    color: white;
}

.header-menu {
   list-style-type: none;
}

.header-element {
    display: inline-block;
    margin: 12px 24px;
    font-size: 17px;
}

.nav-link {
    text-decoration: none;
    color: white;
}

.nav-link:hover {
    border-bottom: 3px solid $main-color;
}

.sticky-navbar {
    position: fixed;
    background: $dark-color;
    width: 100%;
    z-index: 999;
    transition: top 0.6s ease-in-out;
}

/* To add whit JS */
.border-bottom-added {
    border-bottom: 2px solid #ccc;
}

.active {
    color: $main-color;
}

/*MOBILE*/
@media(max-width:768px) {
    .header-container {
        margin: 0;
        display: flex;
        min-height: 10vh;
    }
    .header-menu {
        flex: 1;
        position: relative;
    }
    .header-logo {
        flex: 8;
        margin-left: 20px;
        font-size: 24px;
    }
    .menu {
        display: none;
        height: 100vh;
        width: 100vw;
        background: rgba(0,0,0,.2);
    }
    .header-element {
        font-size: 30px;
        padding: 40px;
        margin: 0;
        display: block;
        text-align: center;
    }
    .line {
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px;
        transition: all .5s ease-in-out;
    }
    .hamburger {
        position: absolute;
        cursor: pointer;
        top: -13px;
        right: 10px;
    }
    .open {
        top: 0;
        transform: translateX(-50px);
        transition: all .5s ease-in-out;
        .line:nth-child(1) {
            transform: rotate(45deg) translate(20px, -15px);
            transition: all .5s ease-in-out;
        }
        .line:nth-child(2) {
            display: none;
            transition: all .5s ease-in-out;
        }
        .line:nth-child(3) {
            transform: rotate(-45deg) translate(20px, 15px);
            transition: all .5s ease-in-out;
        }
    }
    .menu-active {
        display: block;
    }
    #menuButton.open {
        right: 15px;
        top: 18px;
    }
    .hidden {
        display: none;
    }
}


/*TABLET*/
@media(min-width: 769px) and (max-width: 1100px) {
    .header-container {
        margin: 0;
        min-height: 10vh;
    }
    .header-menu {
        flex: 1;
        position: relative;
    }
    .header-logo {
        font-size: 36px;
        flex: 8;
        margin-left: 50px;
    }
    .menu {
        display: none;
        height: 100vh;
        width: 100vw;
        background: rgba(0,0,0,.2);
    }
    .header-element {
        font-size: 40px;
        padding: 45px;
        margin: 0;
        display: block;
        text-align: center;
    }
    .line {
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px;
        transition: all .5s ease-in-out;
    }
    .hamburger {
        position: absolute;
        cursor: pointer;
        top: -16px;
    }
    .open {
        top: 0;
        transform: translateX(-100px);
        transition: all .5s ease-in-out;
        .line:nth-child(1) {
            transform: rotate(45deg) translate(20px, -15px);
            transition: all .5s ease-in-out;
        }
        .line:nth-child(2) {
            display: none;
            transition: all .5s ease-in-out;
        }
        .line:nth-child(3) {
            transform: rotate(-45deg) translate(20px, 15px);
            transition: all .5s ease-in-out;
        }
    }
    .menu-active {
        display: block;
    }
    #menuButton.open {
        right: 15px;
        top: 18px;
    }
    .hidden {
        display: none;
    }
}

//JS
const menuButton = document.getElementById("menuButton");
const menu = document.getElementById("menu");
const navLinks = document.getElementsByClassName("header-element");
const body = document.querySelector("body");
const title = document.getElementsByClassName("header-logo");
let menuOpen = false;

menuButton.addEventListener("click", openMenu);

export function openMenu() {
    if(menuOpen === false) {

        //TABLET
        menu.classList.add("menu-active");
        menuButton.classList.add("open");
        body.classList.add("no-overflow");

        //MOBILE
        title[0].classList.add("hidden");

        //LINKS
        for(let i = 0; i < navLinks.length; i++) {
            navLinks[i].addEventListener("click", function() {
                menu.classList.remove("menu-active");
                menuButton.classList.remove("open");
                body.classList.remove("no-overflow");
                title[0].classList.remove("hidden");
            });
        }
        menuOpen = true;
        console.log("You just clicked, the menu is now open", menuOpen)
    }
    else {
        menuOpen = false;
        console.log("Now its closed", menuOpen)
        //TABLET
        menu.classList.remove("menu-active");
        menuButton.classList.remove("open");
        body.classList.remove("no-overflow");

        //MOBILE
        title[0].classList.remove("hidden");
    }
}

```

Answer 1

因为你的navlink打开时是重叠的十字图标，所以当你点击重叠的区域时，不会触发else语句，而是触发函数导航 link navLinks[i].addEventListener("click", .. 功能。要解决此问题，请减少导航 link 的 width 以避免与十字图标重叠，或者在导航 link 函数

中也将 menuOpen 添加为 false

   navLinks[i].addEventListener("click", function () {
        menu.classList.remove("menu-active");
        menuButton.classList.remove("open");
        body.classList.remove("no-overflow");
        title[0].classList.remove("hidden");
        menuOpen = false; // added 
        console.log("Now its closed", menuOpen); // added
     });
    ```

菜单汉堡按钮未按预期打开，需要单击两次才能打开而不是单击一次（在移动视图中）

menu burger button doesn't open like expected, it needs two click to open instead of one (in mobile view)

javascript

menu

button