Mouseleave隱藏元素？

Question

我有以下代碼

$("#nav-mail").mouseenter(function(){ 
    $("#dropdown_mail").show(); 
}); 

$("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    $("#dropdown_mail").hide(); 
}); 

，我試圖創建一個下拉有了它，但是當我離開＃導航郵區的#dropdown_mail皮，這是我需要的是不工作能夠從＃nav-mail移動到#dropdown_mail而不會關閉。

那麼我該如何做到這一點呢，它允許我從＃nav郵件橫切到#dropdown_mail，並且只有當它的mouseleave兩者都關閉時才能關閉它？

HTML

<div id="navbar"> 
    <!-- Navigation --> 
    <ul> 
     <li id="current"><a href="dashboard.php" class="nav-dashboard">Dashboard</a></li> 
     <li><a href="client.php" class="nav-client">Client</a></li> 
     <li><a href="how-it-works.php" class="nav-system">System</a></li> 
     <li id="nav-mail"><a href="service-plans.php" class="nav-mail">Mail</a></li> 
    </ul> 
    <!-- End Navigation --> 
</div> 

<div id="dropdown_mail"> 
    <ul> 
     <li><a href="email_templates.php">Email Templates</a></li> 
    </ul> 
</div> 

Answer 1

變化mouseenter到mouseover和隱藏前設置timeout。如果用戶仍然在該區域，則將刪除timeout。例如。

var MailTimeout; 

function hideMailDropdown() { 
    $("#dropdown_mail").hide(); 
    clearTimeout(MailTimeout); 
} 

$(document).ready(function() { 
    $("#nav-mail").mouseover(function(){ 
    $("#dropdown_mail").show(); 
    clearTimeout(MailTimeout); 
    }); 

    $("#dropdown_mail,#nav-mail").mouseleave(function(){ 
    var MailTimeout=setTimeout("hideMailDropdown()",500); /* Wait half a second before hiding */ 
    }); 
});