jQuery lenght在firefox中不起作用

Question

我使用rolldown菜單創建了菜單欄。當鼠標離開按鈕時，這個簡短的代碼應該隱藏這個rolldown菜單（.rolldown-menu），並關閉按鈕（.rolldown-button），當鼠標停在rolldown菜單上時，該按鈕將出現異常。 所有的作品都適用於Chrome和Opera，但不適用於FF和IE。在FF $（「。rolldown-menu：hover」）中，length總是0.有人能看到我做錯了什麼嗎？

$(".rolldown-button").mouseleave(function() { 
    var hovered = $(".rolldown-menu:hover").length; 
    if (hovered > 0) { 
    } else { 
     $(".rolldown-menu").removeClass("active"); 
     $(".rolldown-button").removeClass("active");   
    } 
}); 

HTML的結構是這樣的：

  <header class="head"> 
       <!--...--> 
       <nav class="nav-bar"> 
        <ul class="main-menu"> 
         <li class="menu-item rolldown-button"> 
          <a href="#">item 1</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">item 2</a> 
         </li> 
         <li class="menu-item"> 
          <a href="#">item 3</a> 
         </li> 
         <li class="menu-item active"> 
          <a href="#">item 4</a> 
         </li> 
        </ul>  
       </nav> 
      </header> 

      <!--...--> 

      <div class="rolldown-menu navbar-fixed-top hidden-xs"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-sm-3"> 
          <ul> 
           <li class="menu-item active"> 
            <a href="#">submenu - items...</a> 
           </li> 
      <!--...--> 

Answer 1

你捕捉一個元素的mouseleave，同時嘗試測試不同元素的hover。我已經測試過Firefox，Chrome和Safari，他們對待這些情況的方式不同：在Firefox中，如果元素相鄰，mouseleave在第二個元素的hover成爲true之前觸發。 （有趣的是，即使菜單絕對位於與按鈕元素重疊的位置，情況也是如此！）僅當元素嵌套時，使用菜單內的按鈕，當按鈕mouseleave觸發時菜單hover將爲真。

在Safari和鉻，mouseleave出現以後到火位，所以hover爲真用於測試案例菜單元素，只要在相鄰的元件具有在它們之間沒有間隙。

$(".rolldown-button").mouseleave(function() { 
 
    var hovered = $(".rolldown-menu:hover").length; 
 
    console.log("Hovered is ", hovered); 
 
});

.rolldown-button {width: 150px} 
 
.rolldown-menu, .rolldown-button {border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
This always returns 1 when mousing from button to menu: 
 
<div class="rolldown-menu"> 
 
    <div class="rolldown-button">Button</div> 
 
    Menu 
 
</div> 
 
<br><br> 
 

 
This returns 1 in Safari and Chrome, but 0 in Firefox: 
 

 
<div class="rolldown-button">Button 2</div> 
 
<div class="rolldown-menu">Menu 2</div>

對於這個可靠地工作，你要麼需要調整你的HTML，使得按鈕嵌套在菜單內，否則測試.rolldown-menu:hover前mouseleave後添加一個短暫的延遲：

$(".rolldown-button").mouseleave(function() { 
 
    window.setTimeout(function() { 
 
    var hovered = $(".rolldown-menu:hover").length; 
 
    console.log("Hovered is ", hovered); 
 
    },10) 
 
});

.rolldown-button {width: 150px} 
 
.rolldown-menu, .rolldown-button {border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rolldown-button">Button 2</div> 
 
<div class="rolldown-menu">Menu 2</div>