元素悬停slideToggle怪胎仅在Firefox中

施劳文齐乌斯

此问题仅出现在Firefox中。

我尝试尽可能地减少我的代码：JSFiddle示例

我在页面底部有一个显示的菜单：无。上面是我的Button，用来调用slideToggle函数。您能否在Firefox中将这个Button悬停几次，以了解我的意思。有时我的菜单会向下滑动并立即向上滑动，尽管光标仍位于菜单div内。通过将光标移到文本“菜单”下方，将鼠标悬停在菜单按钮上时，通常会出现此问题。

的HTML

<div id="menuBtnFake">Menü</div>

<div id="menu">

    <div id="menuBtn">Menü</div>

    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
    </ul>

</div> <!-- #menu -->

jQuery的

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

}

克里斯

我认为该行为已经堆叠了menuSlideUp和slideUp。我添加了一个“如果”检查是否不执行滑动的其他功能。http://jsfiddle.net/g7eYH/1/

正确的代码似乎是：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。