Question

我正在尝试制作导航。点击它应该在无序列表中逐一显示，它可以工作，但当我关闭导航而不是再次点击它只显示无序列表没有延迟动画。这是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如何关闭导航？尝试在结束过程中对所有li使用.hide（）。从jquery使用fadeIn时，必须隐藏淡入淡出的元素。如果您只是隐藏ul，当您再次显示它时，li将不会被隐藏，因此它们不会以您想要的方式消失。如果你不想改变你的结束过程，你也可以在你的函数开始时添加一个循环（或.each）来迭代悬停每个li并用.hide（）关闭它们。

点击迭代无序列表javascript

1 个答案: