jquery - Mouseleave隐藏元素？

Question

我有以下代码

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

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

我正在尝试用它创建一个下拉菜单，但是当我离开 #nav-mail 区域时，#dropdown_mail 会隐藏，这不起作用，因为我需要能够从 #nav-mail 移动到 #dropdown_mail没有它关闭。

那么我该如何制作它，以便它允许我从#nav-mail横向移动到#dropdown_mail，并且仅当鼠标离开两者时才关闭？

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 并在隐藏之前设置超时。如果用户仍在该区域上方，超时将被删除。例如

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 */
  });
});