响应式导航菜单Toggle'n

Question

I want my responsive navigation to toggle, the code below just expand the Menu button to the different pages. I want to toggle it, so now it just expand but not fold it in.

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 { display: none; list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; }

.visible { display: block; }

Javascript:

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

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

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

Someone can help me please?

Answer 1

You need to use the toggle method instead of the add method.

Demo

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

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

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