如何在jQuery单击函数中使用jQuery时间间隔？

Question

我正在创建一个下拉菜单，并需要隐藏菜单栏时，下拉展开，并显示在一个时间间隔后，当它是折叠的菜单。问题是，我所拥有的代码不是删除我要添加的“切换关闭”类，而是删除jQuery。结果是，在折叠下拉菜单后，菜单栏不会再次出现。问题是jquery函数中在时间间隔内的部分没有执行。

链接到页面

jQuery：

                    $( ".menu-close" ).click(function() {
                        var interval = setInterval(function () {
                            $( ".navbar-header" ).addClass( "toggle-on" );
                            $( ".navbar-header" ).removeClass( "toggle-off" );
                        }, 500);
                        clearInterval(interval);
                        $( "#mob-nav" ).removeClass( "margin-up" );
                        $( "#mob-nav" ).addClass( "margin-down" );
                        $( ".animated" ).removeClass( "go" );
                        $.scrollLock( false );
                    });

Answer 1

为什么不使用setTimout()？

$('.menu-open').on('click',function(){
    $('.navbar-header').addClass('toggle-off').removeClass('toggle-on');
    $('.animated').addClass('go');
    $('#mob-nav').addClass('margin-up').removeClass('margin-down');
    $.scrollLock( true );
});

密切功能

$('.menu-close').on('click',function(){
    setTimeout(function(){
        $('.navbar-header').addClass('toggle-on').removeClass('toggle-off');
    }, 500);
    $('#mob-nav').removeClass('margin-up').addClass('margin-down');
    $('.animated').removeClass( "go" );
    $.scrollLock( false );
});

Answer 2

您可以实现此功能。

setInterval(function(){

    if(myDiv.style.display == "block"){
        myDiv.style.display = "none";
    }else{
        myDiv.style.display = "block";
    }

}, 3000);