Question

我使用下拉菜单创建了菜单栏。当鼠标离开按钮时，此短代码应隐藏此滚动菜单（.rolldown-menu）并关闭按钮（.rolldown按钮），当鼠标位于滚动菜单上时。一切都适用于Chrome和Opera，但不适用于FF和IE。在FF $（＆＃34; .rolldown-menu：hover＆＃34;）。长度总是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变为真之前触发。（有趣的是，即使菜单绝对位于与按钮元素重叠的情况下也是如此！）只有当元素嵌套时，如果菜单内有按钮，当按钮时菜单hover将为真mouseleave火了。

在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以使按钮嵌套在菜单中，或者在mouseleave之后添加一小段延迟，然后再测试.rolldown-menu:hover：< / p>

$(".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>

jQuery lenght在firefox中不起作用

1 个答案: