Question

我有以下代码

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

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

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

那么我该如何才能让它从＃nav-mail转到#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将被删除。 E.g。

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

Mouseleave隐藏元素？

1 个答案: