[英]javascript query selector won't toggle css setting on button click
I'm trying to toggle CSS states to reveal a menu on clicking an animated hamburger button. 我正在尝试切换CSS状态以显示单击动画汉堡包按钮时的菜单。 For some reason, my script won't toggle transform: translateX from 0 to 100% for the nav.
出于某种原因,我的脚本不会切换转换:对于导航,translateX从0到100%。
Have tried onClick as well as event listeners. 尝试过onClick和事件侦听器。 Am I missing something very obvious?
我是否缺少一些显而易见的东西?
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>
On clicking on the burger button the nav transform state should toggle to reveal the menu. 单击汉堡按钮时,导航变换状态应切换以显示菜单。 Thank you very much in advance.
提前非常感谢您。
You seem to have made a typo, replace nav.classList.toggle('.nav-active');
您似乎
nav.classList.toggle('.nav-active');
了,替换nav.classList.toggle('.nav-active');
with nav.classList.toggle('nav-active');
使用
nav.classList.toggle('nav-active');
(No dot before the class) (上课前没有点)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.