javascript - javascript 查询选择器不会在按钮单击时切换 css 设置

Question

我正在尝试切换 CSS 状态以在单击动画汉堡包按钮时显示菜单。出于某种原因，我的脚本不会切换转换：用于导航的 translateX 从 0 到 100%。

尝试过 onClick 以及事件监听器。我错过了一些非常明显的东西吗？

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', () => {
        nav.classList.toggle('.nav-active');
    })
}

navSlide();

.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}

.nav-active {
    transform: translateX(0%);
}

<button class="burger" id="burger" onClick="navSlide()">
   <div class="burgerdiv"></div>
   <div class="burgerdiv"></div>
   <div class="burgerdiv"></div>
</button>

单击汉堡按钮时，导航转换状态应切换以显示菜单。非常感谢您提前。

标签： javascripthtmlcss

Answer 1

您似乎打错字了，替换nav.classList.toggle('.nav-active');为nav.classList.toggle('nav-active');(No dot before the class)