Question

尝试使用具有多个按钮的平滑导航栏，然后在单击时，每个按钮都会显示相关信息。

然而，当我说你点击一个按钮，它开始打开div，然后你点击另一个按钮时，我遇到了让它正常工作的问题，它在将正确的内容加载到通用div中时遇到了一些问题显示按钮的内容。

什么是最好的修复方法，这样如果你开始从一个按钮打开div然后快速点击另一个div，它会隐藏/停止第一次尝试并立即转到第二次？现在，如果我这样做，它将无法正确加载内容，因为.empty（）在新div开始显示后执行。

现在我只是使用setTimeout函数来延迟它，但它无法正常工作。

*注意 - 我使用.on而不仅仅是.click，因为菜单是动态创建的，具体取决于用户所在的页面。这只适用于绑定click事件。

//CONTROL BAR 
    //CLICK OFF OF FORMS
    $(document).on('click','.clear_overlay, .control_bar',function(){
        hideForm();
    });
    //SHOW FORM
    $(document).on('click','.control_bar li.button',function(){
        //CHECK IF CURRENTLY OPEN
        if(!$(this).hasClass('pressed')){
            var form = this;
            setTimeout(function(){showForm(form)},210);
        }
    });

    //SHOW FORM
    function showForm(form){
        var str = $(form).attr('class').split(' ');
        var cl = str[0];
        var id = $(form).attr('id');
        var x = $(form).position().left;
        var y = $(form).position().top;
        x += 230;
        y += 50;
        $('.clear_overlay').show();
        $('body').css('overflow','hidden');
        $('.control_bar_form').load('_forms/'+cl+'.php',function(){
            $('.control_bar_form').find('.button_submit').attr('id',id);
            $('.control_bar_form').css({ "left": x, "top":y });
            $('.control_bar_form').slideToggle(200);
            $(form).addClass('pressed');
        });
    }
    function hideForm(){
        $('.clear_overlay').hide();
        $('body').css('overflow','auto');
        $('.control_bar_form').slideUp(200,function(){
            $('.control_bar li').removeClass('pressed');
            $('.control_bar_form').empty().css('width','auto');
            $('.control_bar_form :input[type="text"]').val('');
            $('.control_bar_form :input[type="checkbox"]').removeAttr('checked');
            $('.clear_overlay').hide();
        });
    }

Answer 1

您正在连接所有错误的点击事件。这就是你的联系方式：

$('.control_bar li.button').click(function(){
//Stuff here
});

Answer 2

我找到了解决此错误的解决方法。将slideUp时间更改为1（即slideUp（1））允许更快地执行.empty（）调用，从而允许加载新内容。

如果可能，我仍然希望有更好的解决方案。但这现在确实有效。

Answer 3

所以，问题是你的脚本的一部分没有充分意识到另一部分正在运行的状态。这意味着您需要添加一些解释状态的变量，并确保该变量对于需要检查状态的脚本部分是可见的。像

这样的东西

var isOpening = false;

然后在showForm（）函数中设置为true，并在其最后一个回调中返回false。 hideForm（）函数应检查此变量的值，如果为真，则返回。

JQuery - 导航菜单slideUp / slideDown过渡

3 个答案: