移动菜单切换不正常

Question

我正在构建一个响应式导航栏。 隐藏/显示的切换适用于移动设备（最大宽度：699 像素），但是当我增加屏幕宽度时，导航栏的链接要么隐藏，要么显示在块中。 我希望每当我增加屏幕宽度时，导航应该显示在 flex 中，而不是继承父属性。 任何人都可以请帮助我。

 var span = document.querySelector("span"); var second = document.querySelector(".second"); span.addEventListener('click', function() { if (second.style.display === "none") { second.style.display = "flex"; } else { second.style.display = "none"; } });

 * { margin: 0; padding: 0; } nav { margin: auto; height: 500px; } nav ul { list-style-type: none; padding: 0; } nav a { text-decoration: none; padding: 10px; display: block; text-align: center; } nav span { display: block; right: 0; top: 0; position: absolute; padding: 10px; } .first a { text-align: left; } .first { overflow: hidden; position: relative; } .second { display: none; } @media screen and (min-width: 700px) { nav { display: flex; justify-content: space-between; } nav ul { display: flex; justify-content: space-between } nav span { display: none; } .second { display: flex; } }

 <nav> <ul class="first"> <li><a href="#">Heading</a></li> </ul> <ul class="second"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <span> <i class="fas fa-bars"></i> </span> </nav>

Answer 1

您可以通过切换一个附加了必要样式的类来实现您想要的行为。 当您将样式直接放在元素上时，这些样式的优先级将高于您拥有的基于类的样式。

添加样式

.flex { display: flex; }

并使用这个 Javascript

var span = document.querySelector("span");
var second = document.querySelector(".second");
span.addEventListener('click', function() {
  second.classList.toggle("flex")
});

示例代码笔： https ://codepen.io/danba340/pen/ZEOjozz