jQuery向下滑动div - 在结束时消失

Question

我在下滑菜单中做了一个下拉菜单中的选项。

我正在使用以下jQuery

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    }, function() {
        $(".menu_options").slideUp(400);
    });
});

我遇到的问题是，当它向下滑动并继续向下滑动的div时它会消失 - 这是设置的屏幕截图

此区域的HTML是

<div class="menu">
            <div class="menu_item" id="1">
                Landlord Packages
            </div>
            <div class="spacer"></div>
            <div class="menu_item">
                Single Items
            </div>
            <div class="menu_options" id="1"></div>
        </div>

提前感谢您的帮助： - ）

JSFiddle脚本http://jsfiddle.net/pCTXq/

Answer 1

尝试

$(document).ready(function() {
    $(".menu_item, .menu_options").hover(function() {
        $(".menu_options").stop(true, true).slideDown(400);
    }, function() {
        $(".menu_options").stop(true, true).delay(10).slideUp(400);
    });
});

这应该做你需要的。

我的小提琴：http://jsfiddle.net/MCvsd/54/

编辑：您提供的小提琴，已更新：http://jsfiddle.net/pCTXq/1/

Answer 2

此处的问题是，您正在.menu_item上方悬停以.menu_options向下滑动，但由于.menu_options超出.menu_item，请将鼠标移至{{} 1}}将隐藏它。

您可以将.menu_options嵌套在每个.menu_options div中来解决此问题。最好有一个JSfiddle或codepen（用你的css）来解决这个问题。

.menu_item

Answer 3

嵌套是方法，但如果你仍然不想使用嵌套，你可以做如下的事情

$(document).ready(function() {
    $(".menu_item").hover(function() {
        $(".menu_options").slideDown(400);
    });
    $(".menu_options").mouseleave(function () {
        $(".menu_options").slideUp(400);
    });
});