導航下拉菜單MouseOut延遲

Question

當訪客鼠標離開菜單時，如何添加延遲以阻止下拉菜單關閉？其中一些菜單很深，所以我不希望菜單偶然關閉某人。

<div class="menu"> 
    <ul> 
     <li> 
      <a href="#">Home</a> 
     </li> 
    <li> 
     <a href="/products/">Products</a> 
     <ul> 
     <li> 
        <a href="product1">product type</a> 
      <ul> 
      <li> 
       <a href="lin1">product1</a> 
      </li> 
      </ul> 
     </li> 
     <li> 
      <a href="link">product type 2</a> 
      <ul> 
       <li> 
        <a href="link">product2</a> 
       </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="klink">Where To Buy</a> 
     <ul> 
      <li> 
       <a href="link">place1</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="link">Contact Us</a> 
    </li> 
    </ul> 
</div> 

Answer 1

您可以使用mouseout事件和setTimeout方法。

見jsFiddle Demo

$(document).ready(function(){ 

    $('#menu').on('mouseout',function(){ 
     setTimeout(function(){ 
      alert("I'm one second late"); 
     },1000); 
    }); 

}); 

當你懸停#menu什麼都不會發生，但是當你的光標離開菜單就會觸發一個動作（在這種情況下，警報）後1秒（或1000毫秒）。