on click iterate through unordered list javascript

Question

I am trying to make a navigation. On click it should show one by one li in unordered list, and it works but when I close navigation and than click again it just shows unordered list without delay animation. Here is the code:

 document.querySelector("#nav-toggle") .addEventListener("click", function() { this.classList.toggle("active"); $('ul > li').each(function(i, elem) { setTimeout(function() { $(elem).fadeIn(); }, i * 500); }); }); 

 <nav> <a id="nav-toggle" href="#"><span></span></a> </nav> <div class="slide"> <div class="slidemeni"> <ul id="foo"> <li class="menili nonenav"><a href="#" class="current">Početna</a></li> <li class="menili nonenav"><a href="#">O nama</a></li> <li class="menili nonenav"><a href="#">Usluge</a></li> <li class="menili nonenav"><a href="#">Analitika</a></li> <li class="menili nonenav"><a href="#">Kontakt</a></li> <li class="menili nonenav"><a href="#">Blog</a></li> </ul> </div> </div> 

Answer 1

How do you close the navigation? Try to use .hide() on all li in the closing process. When you use fadeIn from jquery, the element that is fading must be hidden. If you just hide the ul, when you will show it again, li will not be hidden so they will not fade in the way you want. If you do not want to change your closing process, you could also add a loop (or .each) at the begginning of your function to iterate hover each li and close them with .hide().