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

Question

我正在努力将菜单从 mootools 转换为 jquery。有多种原因导致我必须切换 js 框架，我在这里需要一些帮助，因为我对 jquery 很陌生。

首先是实时站点上的工作 mootools 版本： http://www.kieleconomcis.de

如您所见，菜单悬停时向上移动，显示子菜单，并在您单击链接并加载页面时保持不动。

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

我尝试了一下，复制粘贴，尝试并出错，最后在这里得到了这个 fiddle 。

我的问题是 - 我猜 - 我有一个 $('div.nav_body').hide(); 但我需要告诉它它必须忽略如果前面的元素有 id="visible" ，则会产生效果，

这里是一些代码，以便您可以看到我需要触发的内容：

    <h4 id="visible">Über uns</h4>
        <div id="nav2-body" class="nav_body">

感谢您的任何建议。

Answer 1

使用 :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();

我在你的小提琴中测试了所有三个子菜单。但我真的不能说我最喜欢哪一个。

Answer 2

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

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