菜單漢堡按鈕未按預期打開，需要單擊兩次才能打開而不是單擊一次（在移動視圖中）

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

這是因為你的導航鏈接在打開時是重疊的十字圖標，所以當你點擊重疊的區域時，它不會觸發else語句，而是觸發導航鏈接navLinks[i].addEventListener("click", .. function. 要解決此問題，請減小導航鏈接的width以避免與十字圖標重疊或在導航鏈接中將menuOpen添加為 false function

   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
     });
    ```