响应式导航菜单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');
}