jQueryの長さは、Firefoxで動作しません

Question

私は、ドロップダウンメニューでメニューバーを作成しました。このショートコードでは、このロールダウンメニュー（.rolldown-menu）を非表示にし、マウスがボタンを離れるときにボタン（.rolldown-button）をオフにする必要があります。 ChromeとOperaではすべて正常に動作しますが、FFやIEでは動作しません。 FF $（ "。rolldown-menu：hover"）。長さは常に0です。誰かが私が間違っていることを見ることができますか？

  <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 1の要素を取り込むと同時に、異なる要素のhoverをテストしようとしている：

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

HTMLの構造は次のようになります。

私はFirefox、Chrome、Safariをテストしましたが、これらの状況は違った扱いをしています。つまり、要素が隣接している場合、mouseleaveが2番目の要素のhoverが真になる前に起動します。 （興味深いことに、メニューがボタン要素と重なり合うように絶対配置されていてもそうです！）ボタンのmouseleaveが起動すると、メニュー内のボタンで要素がネストされている場合のみメニューhoverがtrueになります。

サファリとクロムでは、mouseleaveが少し遅れているように見えるので、隣接する要素にギャップがない限り、両方のテストケースのメニュー要素にはhoverがtrueになります。

$(".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>