Question

在导航栏中，点击＆＃34; Home 3＆＃34;菜单，通过jQuery显示下拉菜单。当我将鼠标悬停在菜单的其他链接上时，我想隐藏此菜单，其中包含以下样式：

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

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

Answer 1

选择器.nav-ul .menu-item:hover ul仅定位正在悬停的<ul>项内的.menu-item。

截至目前，您无法使用CSS遍历DOM。

添加以下脚本：

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

Demo

<强>更新

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

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

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

Demo

附注：对于任何投票看到Yury Tarabanko评论的人，对于手头的任务都是not a reliable solution（如果子菜单不起作用在悬停物品之前）。

Answer 2

尝试使用jQuery的mouseenter：

$(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');
    });
});

Demo

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。一切都很好..谢谢你指出我的错误..

Answer 4

此解决方案将通过单击打开子菜单，并在离开标题或子菜单时关闭子菜单。

我为每个标题项提供了一个id

<li class="menu-item" id="3">

然后：

$(function(){
   $("#3").click(function(){
     $(".nav-ul .menu-item ul").css('display', 'block');
   });
   $("#3").mouseleave(function(){
     $(".nav-ul .menu-item ul").css('display', 'none');
   });
});

检查出来：

http://jsfiddle.net/Tw44R/20/

在悬停时隐藏css下拉菜单

4 个答案:

Demo