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>