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>

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

Answer 1

您似乎打错了字词，将nav.classList.toggle('.nav-active');替换为nav.classList.toggle('nav-active');（课程前没有点号）

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

1 个答案: