移動菜單切換不正常

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