jQuery lenght在火狐中不起作用

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。

我测试过火狐、Chrome和Safari，它们对这些情况的处理是不同的:在火狐中，如果元素是相邻的，则在第二个元素的hover为真之前触发mouseleave。(有趣的是，即使菜单的位置绝对与按钮元素重叠，情况也是如此！)只有当这些元素是嵌套的，并且按钮在菜单中时，当按钮mouseleave触发时，menu hover才会为true。

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

​