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

Question

我正在尝试切换 CSS 状态以在单击动画汉堡按钮时显示菜单。出于某种原因，我的脚本不会切换 transform: 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>

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

Answer 1

你好像打错了，把nav.classList.toggle('.nav-active');换成nav.classList.toggle('nav-active');（类前没有点）