jquery - 悬停时隐藏CSS下拉菜单

Question

在导航栏中，单击“Home 3”菜单时，会通过 jQuery 显示一个下拉菜单。当我将鼠标悬停在我已包含样式的菜单的其他链接上时，我想隐藏此菜单:

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

这是 fiddle : http://jsfiddle.net/Tw44R/1/

Answer 1

选择器 .nav-ul .menu-item:hover ul只会针对 <ul>在.menu-item里面悬停的元素。

你不能向上遍历 DOM目前正在使用 CSS。

添加以下脚本:

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

Demo

更新:

如果想在鼠标移开时隐藏下拉框，可以使用hover的第二个回调，如下:

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

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

Demo

旁注:对于看到 Yury Tarabanko 的任何反对票的人的评论，是not a reliable solution用于手头的任务(如果子菜单位于悬停项之前则不起作用)。