Question

我有一个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/

Answer 2

在鼠标离开按钮后，您告诉您的下拉列表淡出。相反，在鼠标移开整个下拉组后，您应该告诉它淡出。

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

Answer 3

您需要有一个计时器才能使其正常工作。如果鼠标不在mouseover上，则仅触发fadeOut。简单地说就可以使用组合了 mouseout和var timeout; jQuery('.dropdown').on('mouseover', function () { clearInterval(timeout); jQuery('.dropdown-menu', this).stop(true, true).delay(200).fadeIn(); }); jQuery('.dropdown').on('mouseout', function () { var thisView = this; timeout = setTimeout(function () { jQuery('.dropdown-menu', thisView).stop(true, true).delay(200).fadeOut(); }, 200); });次活动。

[anything anything]

<强> Check Fiddle

当鼠标悬停时，为什么我的悬停按钮下拉列表不会保持打开状态？

3 个答案: