JavaScript 未按预期运行

Question

我试图使 html css js 响应，但它不能按预期工作，当它最小化时，它已经响应了，但当 onclick 时它不起作用。 导航和导航栏不会出现并在单击时消失。 html 和 css 正在工作 但js我不知道什么是错的还是错的 有人可以帮助我吗？

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

错误出现在您的 CSS 中：

.navbar .open

将其更改为：

.navbar.open

代码中出现的规则指定了一个具有 open 类的元素，该元素具有一个具有 navbar 类的祖先。您想要的规则是指定一个具有both类navbar和open的元素。