響應式導航菜單Toggle'n

Question

我希望我的響應式導航切換，下面的代碼只是將“菜單”按鈕擴展到不同的頁面。 我想切換它，所以現在它只是擴展而不是折疊。

HTML：

  <nav> <a href="#footer_nav" >&#9776; MENU</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Opleiding</a></li> <li><a href="#">Onderwijsprogramma</a></li> <li><a href="#">Organisatie</a></li> <li><a href="#">Stages en projecten</a></li> </ul> </nav> 

CSS：

.in-visible {顯示：無； 列表樣式：無； 左邊距：0； padding-left：0； 底邊距：0; }

.visible {display：block; }

Javascript：

var sensitivenav = document.querySelector（'header> nav> ul'）;

activenav.classList.add（'in-visible'）;

document.querySelector（'header> nav> a'）。onclick = function（）{響應nav.classList.add（'visible'）; }

有人可以幫我嗎？

Answer 1

您需要使用toggle方法而不是add方法。

演示版

var responsivenav = document.querySelector('nav > ul');

responsivenav.classList.add('in-visible');

document.querySelector('nav > a').onclick = function() { 
    responsivenav.classList.toggle('visible');
}