jQuery 长度在 Firefox 中不起作用

Question

我创建了带有下拉菜单的菜单栏。此短代码应隐藏此滚动菜单（.rolldown-menu）并在鼠标离开按钮时关闭按钮（.rolldown-button），但当鼠标悬停在滚动菜单上时除外。 一切都适用于 Chrome 和 Opera，但不适用于 FF 和 IE。在 FF $(".rolldown-menu:hover").length 中始终为 0。有人能看出我做错了什么吗？

$(".rolldown-button").mouseleave(function() {
    var hovered = $(".rolldown-menu:hover").length;
    if ( hovered > 0) {
    } else {
        $(".rolldown-menu").removeClass("active");
        $(".rolldown-button").removeClass("active");           
    }
});

html的结构是这样的：

            <header class="head">
                <!--...-->
                <nav class="nav-bar">
                    <ul class="main-menu">
                        <li class="menu-item rolldown-button">
                            <a href="#">item 1</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">item 2</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">item 3</a>
                        </li>
                        <li class="menu-item active">
                            <a href="#">item 4</a>
                        </li>
                    </ul>      
                </nav>
            </header>

            <!--...-->

            <div class="rolldown-menu navbar-fixed-top hidden-xs">
                <div class="container">
                   <div class="row">
                        <div class="col-sm-3">
                            <ul>
                                <li class="menu-item active">
                                    <a href="#">submenu - items...</a>
                                </li>
             <!--...-->   

Answer 1

您正在捕获一个元素的mouseleave，同时尝试测试另一个元素的hover。

我测试了 Firefox、Chrome 和 Safari，它们对这些情况的处理方式不同：在 Firefox 中，如果元素相邻，mouseleave 在第二个元素的 hover 变为 true 之前触发。 （有趣的是，即使菜单绝对定位到与按钮元素重叠也是如此！）只有当元素嵌套时，按钮在菜单内，当按钮@987654326 时，菜单hover 才会为真@火灾。

在 Safari 和 Chrome 中，mouseleave 似乎会稍后触发，因此hover 在两个测试用例中都适用于菜单元素，只要相邻元素之间没有间隙即可。

$(".rolldown-button").mouseleave(function() {
  var hovered = $(".rolldown-menu:hover").length;
  console.log("Hovered is ", hovered);
});

.rolldown-button {width: 150px}
.rolldown-menu, .rolldown-button {border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This always returns 1 when mousing from button to menu:
<div class="rolldown-menu">
  <div class="rolldown-button">Button</div>
  Menu
</div>
<br><br>

This returns 1 in Safari and Chrome, but 0 in Firefox:

<div class="rolldown-button">Button 2</div>
<div class="rolldown-menu">Menu 2</div>

为了使其可靠地工作，您需要重新构建 HTML 以便按钮嵌套在菜单中，或者在测试 .rolldown-menu:hover 之前在 mouseleave 之后添加一小段延迟：

$(".rolldown-button").mouseleave(function() {
  window.setTimeout(function() {
  var hovered = $(".rolldown-menu:hover").length;
  console.log("Hovered is ", hovered);
  },10)
});

.rolldown-button {width: 150px}
.rolldown-menu, .rolldown-button {border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rolldown-button">Button 2</div>
<div class="rolldown-menu">Menu 2</div>