用 javascript 改变 class css 风格

Question

我的问题是我试图在 js 中更改我的“导航链接”样式，因为我在 CSS 上将其显示为无，所以当我单击 class“汉堡”时，我试图在我的 js 上将其显示为“块” ”并再次恢复我的风格，但是当我单击 class“汉堡包”时，会出现“导航链接”，这意味着nav2.style.display = "block"; 正在工作，但 .style 的.style不工作，我不明白为什么。 如果有人可以帮助我，我将非常感激。

我想改变什么：

我正在使用 function showhide() 所以我可以在<div class="burger" **onclick= "showhide()"**>上使用 onclick

 var clicked = 0; var nav2 = document.querySelector('.nav-links'); const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); burger.addEventListener('click', () => { //Toggle Nav nav.classList.toggle('nav-active'); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = ''; } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s` } }); //Burger Animation burger.classList.toggle('toggle'); }); } if (window.matchMedia("(max-width: 858px)")) { function showhide() { clicked++; console.log(clicked) if (clicked == 1) { nav2.style.position = "absolute"; nav2.style.right = "0px"; nav2.style.height = "92vh"; nav2.style.top = "8vh"; nav2.style.backgroundColor = "#000000"; nav2.style.display = "flex"; nav2.style.flexDirection = "column"; nav2.style.transition = "transform 0.5s ease-in"; nav2.style.display = "block"; }; if (clicked == 2) { nav2.style.display = "none"; clicked = 0; } }; } navSlide()

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

 <nav> <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo"> <ul class="nav-links"> <li><a href="carrosview.html">Carros</a></li> <li><a href="">Motas</a></li> <li><a href="">Barcos</a></li> <li><a href="registarentrar.html">Entrar / Registar</a></li> </ul> <div class="burger" onclick="showhide()"> <div class="line1">---</div> <div class="line2">---</div> <div class="line3">---</div> </div> </nav>

Answer 1

好吧，您的脚本中发生了太多毫无意义的事情，所以我只是做了一些更改，这样也许您可以更好地了解发生了什么。

仅举几例：首先，您在按钮上使用带有事件侦听器的 function，这是完美的，但您还使用了 onlick 事件。 这是没有意义的。 你可以把它们结合起来。

常量在 function 中，在这种情况下也没有任何意义。nav 和 nav2 甚至是完全相同的元素？！

您正在切换 class.nav-active，它根本不在 css 中？？ 什么想法？

所以你展示的代码可以通过添加或删除 class 完美地工作，但是试图单独激活所有类型的 styles.. 这也没有意义。

使用 ++ 来点击 0 或 1 可以通过简单地使其为 true 或 false 来完成。

我不确定你想要什么 JS matchmedia，你也可以在 css 中轻松地做到这一点，我把它留在那里，但你也可以删除这整个部分。

无论如何，查看代码并尝试更多...最终可以减少到 2 或 3 行，但继续学习，你会到达那里！

 var clicked = 0; const nav = document.querySelector('.nav-links'); const burger = document.querySelector('.burger'); const navLinks = document.querySelectorAll('.nav-links li'); const navSlide = () => { burger.addEventListener('click', () => { burger.classList.toggle('toggle'); showhide(); }); } if (window.matchMedia("(max-width: 858px)")) { function showhide() { nav.classList.toggle('clicked'); clicked =;clicked; if (clicked) { // if clicked true }; if (!clicked) { // if not } }; } navSlide()

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

 <nav> <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo"> <ul class="nav-links"> <li><a href="carrosview.html">Carros</a></li> <li><a href="">Motas</a></li> <li><a href="">Barcos</a></li> <li><a href="registarentrar.html">Entrar / Registar</a></li> </ul> <div class="burger"> <div class="line1">---</div> <div class="line2">---</div> <div class="line3">---</div> </div> </nav>