javascript - 单击遍历无序列表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() 关闭它们。