加载新页面时，Jquery滑出了底部鼠标悬停菜单问题

Question

我正在努力将菜单从mootools转换为jquery。有各种原因我必须切换js框架，我需要一些帮助，因为我对jquery很新。

首先在实际网站上运行mootools版本：http://www.kieleconomcis.de

正如您所看到的，当您单击链接并加载页面时，菜单会在悬停时向上移动，显示子菜单并保持。

现在我必须将其转换为jquery我还希望能够分别控制每个菜单的高度，所以它a）看起来更像条形图和b）我可以放置4子菜单：）

我玩过，复制和粘贴，尝试过和错误，最后在这里fiddle结束了。

我的问题是 - 我猜 - 我有$('div.nav_body').hide();但是我需要告诉它如果前面的元素有{{1}则必须忽略效果}

这里有一些代码，所以你可以看到我需要触发的内容：

id="visible"

感谢任何爱慕。

Answer 1

您可以检查它的父h4是否将其ID设置为可见

if ($('div.nav_body').parent('h4').attr('id') == 'visible')

Answer 2

使用:not()和:has()选择器有效：

$('div.nav_container:not(:has(#visible)) .nav_body').hide();

filter()方法也有效：

$('div.nav_body').filter(function () {
    return !$(this).prev().is("#visible");
}).hide();

或使用.not()从待隐藏项目中移除一个子菜单：

$('div.nav_body').not($("#visible").next()).hide();

我在你的小提琴中测试了所有三个。不过，我真的不能说出哪一个我最喜欢。