JavaScript ne fonctionne pas comme prévu

Question

J'essaie de rendre HTML CSS JS réactif mais il ne fonctionne pas comme prévu, lorsqu'il est minimisé, il est déjà réactif mais lorsqu'on clique, il ne fonctionne pas. La navigation et la barre de navigation n'apparaissent pas et disparaissent lorsque vous cliquez dessus. html et css fonctionnent Mais je ne sais pas ce qui ne va pas ou ce qui ne va pas Quelqu'un peut-il m'aider?

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

Une erreur apparaît dans votre CSS :

.navbar .open

Changez-le par :

.navbar.open

La règle apparaissant dans le code précise un élément avec open 类的元素，该元素具有一个具有 navbar 类的祖先。您想要的规则是指定一个具有both类navbar和open.