元素悬停滑动切换仅在Firefox中出现

这个问题只出现在Firefox中

我尝试尽可能地最小化我的代码：

我在页面底部显示了一个菜单：无。上面是我调用slideToggle函数的按钮。请你在Firefox中把这个按钮悬停几次，看看我的意思。有时“我的菜单”会立即向下滑动和向上滑动，尽管光标仍在“菜单”分区内。当您将光标移动到“菜单”文本下方时，此问题通常会在悬停“菜单”按钮时出现

HTML

}))

---

}

我认为这种行为导致了菜单上下滑动。 我添加了一个“如果”检查滑动的其他功能是否未执行。

正确的代码似乎是：

jQuery(document).ready(function(){

    // Get window width + height
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    document.myslide=0;

    $('#container1').css({
        'width': windowWidth,
        'height': windowHeight
    });

    // menu toggle
    $('#menuBtnFake').hoverIntent({
        over: menuSlideUp
    });

    $('#menu').mouseleave(function(){
        if(document.myslide==0){
          $(this).slideUp(500);
        }else{
             //double slide behavior occurs here 
        }
        $('#contentFader').fadeIn(500);
    });

    $('#menuBtn').click(function(){
        $('#menu').slideUp();
        $('#contentFader').fadeIn(500);
    });

});

function menuSlideUp(){
        document.myslide=1;
        $('#menu').slideToggle(500, function(){ document.myslide=0});




    $('#contentFader').fadeOut(700);
}

---

看看这个，你的代码似乎工作得很好。但我真的不明白为什么在我悬停“#menuBtnFake”时可以调用“$（“#menu”）.mouseleave（function（）”…现在没有mouseleave？！但是谢谢Chris！

jQuery(document).ready(function(){

// Get window width + height
var windowWidth = $(window).width();
var windowHeight = $(window).height();

$('#container1').css({
    'width': windowWidth,
    'height': windowHeight
});

// menu toggle
$('#menuBtnFake').hoverIntent({
    over: menuSlideUp
});

$('#menu').mouseleave(function(){
    $(this).slideUp();
    $('#contentFader').fadeIn(500);
});

$('#menuBtn').click(function(){
    $('#menu').slideUp();
    $('#contentFader').fadeIn(500);
});

function menuSlideUp(){
$('#menu').slideToggle(500);
$('#contentFader').fadeOut(700);

jQuery(document).ready(function(){

    // Get window width + height
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    document.myslide=0;

    $('#container1').css({
        'width': windowWidth,
        'height': windowHeight
    });

    // menu toggle
    $('#menuBtnFake').hoverIntent({
        over: menuSlideUp
    });

    $('#menu').mouseleave(function(){
        if(document.myslide==0){
          $(this).slideUp(500);
        }else{
             //double slide behavior occurs here 
        }
        $('#contentFader').fadeIn(500);
    });

    $('#menuBtn').click(function(){
        $('#menu').slideUp();
        $('#contentFader').fadeIn(500);
    });

});

function menuSlideUp(){
        document.myslide=1;
        $('#menu').slideToggle(500, function(){ document.myslide=0});




    $('#contentFader').fadeOut(700);
}