JQuery - 导航菜单上滑/下滑过渡

Posted 2023-02-16

【中文标题】JQuery - 导航菜单上滑/下滑过渡

【英文标题】：JQuery - Navigation Menu slideUp / slideDown transitioning

【发布时间】：2011-12-13 23:12:39

【问题描述】：

尝试创建一个包含多个按钮的平滑导航栏，然后在单击每个按钮时下拉一个带有相关信息的小 div。

但是，当假设您单击一个按钮，它开始打开 ​​div，然后您单击另一个按钮，将正确的内容加载到过去的通用 div 中时，我遇到了一些问题显示按钮的内容。

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

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

*注意 - 我使用 .on 而不是 .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();
        );
    

【参考方案1】：

你连接到点击事件都错了。这就是你的连接方式：

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

【讨论】：

不，这很好用。我必须使用 .on 来完成，因为导航菜单的内容是动态创建的。所以使用普通的.click函数不会被绑定。

好吧，老实说我没有发现任何问题。尝试在 Safari 或 FF 中运行它并单击“检查元素”并查看错误。很有帮助。

没有实际错误。错误是，由于在 'slideDown' 发生时'slideUp' 尚未完成，所以在 slideUp 回调中调用的 .empty() 函数在另一个 div 的 slideDown （并加载新内容）之后执行正在发生，因此新 div 的内容会被清空。

【参考方案2】：

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

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

【参考方案3】：

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

var isOpening=false;

然后在 showForm() 函数中设置为 true 并在最后一次回调中设置为 false。 hideForm() 函数应该检查这个变量的值，如果为真就返回。