javascript - 为什么当我将鼠标悬停在鼠标上时，我的悬停按钮下拉菜单不会保持打开状态？

Question

要事第一:http://jsfiddle.net/9L81kfah/

我有一个 Bootstrap 下拉菜单，如果有人将鼠标悬停超过 200 毫秒，特别是当他们将鼠标移到菜单内容上时，它应该打开并保持打开状态，但它不会保持打开状态。我在这里做错了什么？

这是下拉代码:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

还有 jQuery:

jQuery('#dropdownMenu1').hover(function() {
        jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
        jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Answer 1

这是因为您的悬停处理程序位于按钮元素上，一旦您将鼠标悬停在菜单元素上，“mouseout”处理程序就会触发，因为您离开了按钮。相反，您的处理程序应该位于周围的 .dropdown 元素上。

$('.dropdown').hover(function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

现在，当您将鼠标悬停在按钮上时，它将起作用，因为该按钮是 .dropdown 元素和悬停事件 bubbles up 的子元素。通过父元素。当您将鼠标从按钮移至下拉菜单时，您仍将悬停在 .dropdown 上，因为该菜单也是 .dropdown 的子项。只有当您完全离开父元素时，“mouseout”处理程序才会触发。

http://jsfiddle.net/1xpLm4jw/