Javascript 单击中多个元素之一的延迟切换

下面有一个基本函数，它可以同时为两个不同的元素切换相同的“.closed”类。我需要找到一个解决方案来延迟改变导航元素的类。我试图使用delay（），但据我所知，它只适用于动画元素

我只能通过向NAV元素添加CSS转换来实现我想要的效果，但我希望使用JQuery解决方案。你能告诉我一个正确的解决方案吗。谢谢

注意：我使用jQueryUI向toggleClass添加持续时间

$（'.menu items'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（'.menu item，nav'）.toggleClass（“closed”，500）；//要更改此项
});
nav{
位置：固定；
宽度：100%；
身高：100%；
溢出：隐藏；
z指数：9999；
}
导航关闭{
z指数：0！重要；
}
导航菜单项{
位置：绝对位置；
身高：100%；
宽度：25%；
-webkit背景尺寸：封面！重要；
-moz背景尺寸：封面！重要；
-o-背景尺寸：封面！重要；
背景尺寸：封面！重要；
光标：指针；
}
#m1.已关闭，
#m2.已关闭，
#m3.已关闭，
#m4.关闭{
左：0；
}

菜单1
菜单2
菜单3
菜单4
您可以使用本机JS事件：


更新

由于您正在根据切换的类寻找不同的行为，因此您最好使用和
if…else
模拟切换。这样，只有在添加close类时才能添加超时。例如：

$('.menu-items').click(function(){
    // Delay for 1 second (1000ms)
    var toggled = $('.menu-item,nav');
    if($(toggled).hasClass("closed")) {
        toggled.removeClass("closed");
    } else {
        var timer = setTimeout(function(){
            toggled.addClass("closed");
        }, 1000); 
    }
});

。请注意，添加类需要1秒的时间
已关闭
，但删除该类时会立即关闭。
您可以使用一个简单的
设置超时（）
：

您要查找的是window.setTimeout（）。它有两个参数，第一个是超时后要运行的函数，第二个是延迟多长时间。有关详细信息，请访问
toggleClass（）
支持转换持续时间，因此您不需要外部实现来处理此问题。确保您有对
jqueryui
的引用

$('.menu-item').click(function(){  

    var $thisId = this.id;
    $('.menu-item').each(function()
    { 
        if(this.id != $thisId)
         $(this).addClass("closed",2000);

    }); 
    $(this).toggleClass("closed active",2000);

});

工作示例：
这是一个函数，它完全符合我的要求。感谢大家的努力：）

谢谢你的回答，它部分解决了我的问题，但我需要一些改进：）我更新了我的问题。如果我找不到任何解决方案，我会将您的问题标记为正确的，因为它几乎满足了我的要求：）再次感谢。@EmilGurbanov没问题，请参阅我的更新答案以了解新功能。我尝试了这种方法，但对我来说没有，它将块动画化为“唯一打开”切换，“切换回”会使动画和想法本身崩溃：）请参见工作示例，一旦单击“切换回”内容层位于前面，并且仅在动画完成后才会消失。@EmilGurbanov您可以添加第二个参数，为
removeClass
和
addClass
的动画添加过渡。
$('.menu-items').click(function(){
    $(this).toggleClass('active');
    setTimeout(function() {
            $('.menu-item, nav').toggleClass("closed");
    }, 500);
});

$('.menu-item').click(function(){  

    var $thisId = this.id;
    $('.menu-item').each(function()
    { 
        if(this.id != $thisId)
         $(this).addClass("closed",2000);

    }); 
    $(this).toggleClass("closed active",2000);

});

var menu = $('.menu-item');
var content = $('.content');
var menuItems = $('.inner');
var toToggle = $('.menu-item, nav');
var toggled = false;



menuItems.on('click', function(){
    if (!toggled){
        toToggle.addClass("closed", 1000); //adds class with same timing
        toggled = true;
    }
    else {
        $('nav').removeClass('closed', function(){ //removes class immediately
            menu.removeClass('closed', 1000); //removes class during one secend
        });
        toggled = false;
    }
});