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> 

單擊漢堡按鈕時，導航變換狀態應切換以顯示菜單。 提前非常感謝您。

Answer 1

您似乎nav.classList.toggle('.nav-active');了，替換nav.classList.toggle('.nav-active'); 使用nav.classList.toggle('nav-active'); （上課前沒有點）