요소 호버 slideToggle은 Firefox에서만 작동합니다

Question

이 문제는 Firefox에서만 나타납니다. 아무도 : 나는 디스플레이에없는 페이지 하단에 메뉴가 JSFiddle Example

:

나는 가능한 한 많은 내 코드를 최소화 할했습니다. 위에서 slideToggle 함수를 호출하는 Button입니다. 내 말은 Firefox에서이 버튼을 몇 번 가리켜 주시겠습니까? 때로는 내 메뉴가 아래로 슬라이드하고 바로 위로 이동합니다. 커서는 여전히 메뉴 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); 

}

Answer 1

나는 행동이 menuSlideUp과 slideUp을 쌓아했다 생각합니다. 슬라이딩의 다른 기능이 실행되지 않는 경우 'if'확인을 추가했습니다.

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