單擊時遍歷無序列表javascript

Question

我正在嘗試進行導航。 在單擊時，它應該在無序列表中一一顯示，並且它可以工作，但是當我關閉導航並再次單擊時，它只是顯示無序列表而沒有延遲動畫。 這是代碼：

 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

您如何關閉導航？ 在關閉過程中，嘗試對所有li使用.hide（）。 當您從jquery使用fadeIn時，必須隱藏正在褪色的元素。 如果僅隱藏ul，則當您再次顯示它時，li將不會被隱藏，因此它們不會以您想要的方式褪色。 如果您不想更改關閉過程，則還可以在函數的開頭添加一個循環（或.each）來迭代懸停每個li並使用.hide（）關閉它們。