javascript - 单击时延迟切换多个元素之一

Question

我有下面的基本功能，可以同时为两个不同的元素切换相同的“.closed”类。我需要找到一种解决方案来延迟更改 NAV 元素的类。我尝试使用 delay() 但据我所知它仅适用于动画元素。

我只能通过将 CSS 过渡添加到 NAV 元素来获得我想要的效果，但我想要 JQuery 解决方案。能否请您指导我找到正确的解决方案。谢谢

注意:我使用 JQuery UI 将持续时间添加到 toggleClass

$('.menu-items').click(function(){
  $(this).toggleClass('active');
  $('.menu-item, nav').toggleClass("closed", 500); //this one to be changed
});

nav{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9999 ;
}
nav.closed{
  z-index: 0 !important;
}

nav .menu-item{
  position: absolute;
  height: 100%;
  width: 25%;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  cursor: pointer;
}
#m1.closed,
#m2.closed,
#m3.closed,
#m4.closed{
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<nav>
  <div id="m1" class="menu-item">
    <div class="inner ab-ctr">
      <h2 class="ab-ctr">menu1</h2>
    </div>
  </div>
  <div id="m2" class="menu-item">
    <div class="inner ab-ctr">
      <h2 class="ab-ctr">menu2</h2>
    </div>
  </div>
  <div id="m3" class="menu-item">
    <div class="inner ab-ctr">
      <h2 class="ab-ctr">menu3</h2>
    </div>
  </div>
  <div id="m4" class="menu-item">
    <div class="inner ab-ctr">
      <h2 class="ab-ctr">menu4</h2>
    </div>
  </div>
</nav>

更新:伙计们，感谢您的回答。但是我没有考虑到我只需要为“关闭”类(class)设置不同的时间。例如，我需要在更改“.menu-item”类后的一秒钟内更改 NAV 类(我已经使用 setInteval 完成了)，但是一旦我切换回来，NAV 必须立即更改其值，不得有任何延迟。 setInterval 是否也可以，或者我需要找到另一个不太复杂的解决方案？ :)

Answer 1

您可以使用一个简单的setTimeout():

$('.menu-items').click(function(){
    $(this).toggleClass('active');
    setTimeout(function() {
            $('.menu-item, nav').toggleClass("closed");
    }, 500);
});