JS-僅在切換類的情況下如何切換CSS類

Question

我正在嘗試構建自己的響應式移動導航。 這是我的第一次嘗試，但是我已經走得很遠了。 它有效，但是我在正確切換時遇到問題。

這是我的代碼：

  function classToggle() { var navigation = document.querySelectorAll('.nav-links') navigation.forEach(nav => nav.classList.toggle('mobile-navigation')); } document.querySelector('.menu-toggle-button').addEventListener('click', classToggle); document.querySelector('.nav-links').addEventListener('click', classToggle); 

 nav { display: flex; position: absolute; width: 100%; padding: 1rem 2rem; } .nav-links { display: none; } .nav-links li { text-align: center; list-style-type: none; margin: 1.7em 0 0 0; padding: 0 } nav, .nav-links { flex-direction: column; } .menu-toggle-button { align-self: flex-end; position: absolute; margin-top: 1rem; cursor: pointer; } .mobile-navigation { display: flex; justify-content: center; background-color: black; margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; } @media (min-width: 992px) { /* Navigation */ .mobile-navigation { flex-direction: row; } .nav-links { display: flex; margin-left: auto; height: auto; padding: 0; } .nav-links, nav { flex-direction: row; } .nav-links li { margin-top: 0; margin-left: 2.6em; } .menu-toggle-button { display: none; } 

 <nav class="navbar"> <div class="brand"> <p>Logo</p> </div> <div class="menu-toggle-button"> <span>|||</span> </div> <ul class="nav-links"> <li> <a href="javascript:void(0)">Risus Baulits</a> </li> <li> <a href="javascript:void(0)">Sodales Vapien</a> </li> <li> <a href="javascript:void(0)">Fermentum</a> </li> <li> <a href="javascript:void(0)">Posuere Risus!</a> </li> </ul> </nav> 

https://codepen.io/anon/pen/MzJOrG

我不明白的是如何僅在類已經具有移動導航功能的情況下才將click事件添加到菜單，因此當菜單是簡單的鏈接行時，不會在更大的屏幕上切換類。 我不想使用jQuery。

謝謝。

Answer 1

這個概念是使用CSS媒體查詢根據視口大小（窗口大小）顯示/隱藏切換按鈕，例如：

//hide the toggle button
.menu-toggle-button {
  display: none
}
//show the toggle button if window size is less than 768 
@media only screen and (max-width: 768px) {
   display: block
}

這樣，該按鈕將不會在桌面上顯示為click事件，