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

时间:2017-05-30 17:59:01

标签: javascript jquery html css

我正在创建一个下拉菜单,需要在下拉列表展开时隐藏菜单栏,并在折叠后的时间间隔后显示菜单。问题是我的代码没有删除我添加的“切换”类和使用jQuery删除。结果是折叠下拉列表后菜单栏不会重新出现。问题是在时间间隔内的jquery函数部分没有执行。

LINK TO PAGE

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 );
                    });

2 个答案:

答案 0 :(得分:0)

您可以实现此功能。

setInterval(function(){

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

}, 3000);

答案 1 :(得分:0)

为什么不使用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 );
});