在悬停时隐藏css下拉菜单

Question

在导航栏中，单击"Home 3“菜单时，将通过jQuery显示下拉菜单。当我在包含样式的菜单的其他链接上悬停时，我想隐藏此菜单，如下所示：

.nav-ul .menu-item:hover ul{
    display:none;
}

这是小提琴：http://jsfiddle.net/Tw44R/1/

Answer 1

选择器.nav-ul .menu-item:hover ul将只针对正在悬停的.menu-item项中的<ul>。

到目前为止，您不能使用CSS遍历DOM。

添加以下脚本：

$('.menu-item').hover(function(){
    $(this).siblings().find('ul').hide();
});

演示

更新：

如果要在鼠标移动时隐藏下拉列表，可以使用悬停的第二个回调，如下所示：

$('.menu-item').hover(function () {
    $(this).siblings().find('ul').hide();
},

function () {
    $(this).find('ul').hide()
});

演示

旁注:对于任何看到塔拉班科评论的投票人来说，这都是手头任务的不是一个可靠的解决办法 (如果子菜单在悬停的项目之前，则不起作用)。

Answer 2

尝试使用jQuery的鼠标：

$(function () {
    $(".nav-header .nav-ul .menu-item .menu-item-link").click(function (link) {
        if (link.currentTarget.text === 'Home 3') {
            $(this).next("ul").css('display', 'block');
        }
        link.stopPropagation();
    }).mouseenter(function () {
        $(".nav-header .nav-ul .menu-item ul:visible").css('display', 'none');
    });
});

演示

Answer 3

您可以使用以下方法：

$(".nav-header .nav-ul .menu-item").hover(function (){
        $(".menu-item").each(function(){
            if($(this).find("ul").css("display") == "block")
                $(this).find("ul").css("display","none");
        });
    })

看看这个JSFiddle..。

编辑：我不应该使用..menu item-link，也只是编辑了JSFiddle。一切正常..。谢谢你指出我的错误..。