Question

问题可能有点连线但换句话说我有一个菜单（见jsfiddle）

当我将鼠标悬停在div上时，我会下降。当我鼠标移动时，下拉消失。到目前为止一切顺利。

问题是如果鼠标悬停在下拉菜单上，我希望菜单保持打开状态。

ex: if($elem).not(":hover"){..}

一些代码：

<div class="top_menu_item">
    <div class="hover_item">
        <a href="#">TEST</a>
    </div>
    <div class="drop_item" style="display: none;">
        <div>
            <a href="#">My test</a>
        </div>
        <div class="">
            <a href="#">Add test</a>
        </div>
        <div>
            <a href="#">Remove test</a>
        </div>
    </div>

$(document).ready(function () {
    var elem = new Array();
    var len = $(".hover_item").length;
    var i = 0;
    while (i < len) {
        elem[i] = $(".hover_item:eq(" + i + ")");

        i = i + 1;
    }
    $.each(elem, function (key, val) {
        hoverFunc(val);
    });

});

function hoverFunc($elem) {

    $elem.hover(function () {
        if ($elem.next().is(":hidden")) {
            $elem.next().slideDown("fast");
        }
    });

    $elem.mouseleave(function (e) {
        // here should be :  if the mouse is not hovering over the dropdown, then
        $elem.next().slideUp("fast");
    });

    $elem.next().mouseleave(function (e) {
        $elem.next().slideUp('fast');
    });
}

如果有人可以重新弄清楚我的问题，请说出我的意思，请这样做。

感谢

Answer 1

您不需要使用javascript执行此操作：CSS solution。

只需将子菜单（.drop_item）作为子元素添加到触发元素（.hover_item）并添加一些CSS：

.drop_item { display: none; }
.hover_item:hover .drop_item { display: block; }

Answer 2

试试这个。

为nextElem添加了鼠标悬停事件。还清理变量以提高效率，而不是引用$ elem.Next（），只需设置

var nextElem = $elem.Next()

并添加了此

  nextElem.hover(function () {
    if ($elem.is(":hidden")) {
        $elem.slideDown("fast");
    }

});

http://jsfiddle.net/fmTnh/3/

如何在jquery中的2个div中隐藏mouseleave上的div？

2 个答案: