JavaScript tidak berjalan seperti yang diharapkan

Question

Saya cuba menjadikan html css js responsif tetapi ia tidak berfungsi seperti yang diharapkan, apabila ia diminimumkan ia sudah responsif tetapi apabila onclick ia tidak berfungsi. Navigasi dan bar navigasi tidak muncul dan hilang apabila diklik. html dan css berfungsi Tetapi js saya tidak tahu apa yang salah atau salah Bolehkah sesiapa membantu saya?

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

console.log(menu); // cek "menu-icon" 
console.log(navbar); // cek "navbar"

menu.onclick = () => {
    menu.classList.toggle("bx-x");
    navbar.classList.toggle("open");
}

#menu-icon
{
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}


/* ini untuk mengatur tampilan hp */
@media (max-width: 1280px)
{
    header
    {
        padding: 14px 2%;
        transition: .2s;
    }
    .navbar a
    {
        padding: 5px 0;
        margin: 0px 20px;
    };
}

@media (max-width: 1090px)
{
    #menu-icon
    {
        display: block;
    }   
    .navbar
    {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29hv;
        background: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar .open
    {
        right: 2%;
    }
}

    
      <ul class="navbar">
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">EVENT</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
      <div class="main">
        <div class="bx bx-menu" id="menu-icon"></div>
      </div>
    </header>
    <!-- js link -->
    <script type="text/javascript" src="js/script">
    </script>

Answer 1

Ralat muncul dalam CSS anda:

.navbar .open

Tukar kepada:

.navbar.open

Peraturan yang muncul dalam kod menentukan elemen dengan open 类的元素，该元素具有一个具有 navbar 类的祖先。您想要的规则是指定一个具有both类navbar和open.