为什么鼠标悬停时我的悬停按钮下拉菜单没有保持打开状态？

Question

First things first: http://jsfiddle.net/9L81kfah/

I have a Bootstrap dropdown that's supposed to open and stay open if somebody does a mouse-over for more than 200ms, especially if they then move the mouse over the menu content, but it's not staying open. What am I doing wrong here?

This is the dropdown code:

<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>

And the 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

It's because your hover handler is on the button element and as soon as you mouseover the menu element the "mouseout" handler triggers because you left the button. Instead your handler should be on the surrounding .dropdown element.

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

Now when you're hovering the button it will work because the button is a child of the .dropdown element and the hover event bubbles up through the parent elements. When you move the mouse from the button to the dropdown menu you'll still be hovering over .dropdown as well because the menu too is a child of .dropdown . Only when you leave the parent element entirely will the "mouseout" handler fire.

http://jsfiddle.net/1xpLm4jw/

Answer 2

You're telling your dropdown to fade out after you mouse off the button. Instead, you should tell it to fade out after you mouse off the entire dropdown group.

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

You would need to have a timer to get this working. Only trigger the fadeOut if the mouse is not over the dropdown . Simply put you can use the combination of mouseover and mouseout events.

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

Check Fiddle