Question

i’m struggling with converting a menu from mootools to jquery. there are various reasons why i have to switch the js framework and i need some help here because i quite new to jquery.

first the working mootools version on the live site: http://www.kieleconomcis.de

as you can see the menu moves up on hover, reveals the sub menu and stays up when you click a link and load the page.

now that i have to convert this into jquery i also want to be able to control the heigth of each menu individually, so it a) looks more like a bar graph and b) i can place 4 submenus 🙂

i played around, copy&pasted, tried&errored and ended up with this fiddle here.

my problem is – i guess – that i have a $('div.nav_body').hide(); but i need to tell it that it has to ignore the effect if the element before it has an id="visible"

here is some of the code so you can see what i need to trigger:

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

thanks for any adice.

Answer 1

Using the :not() and :has() selector works:

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

The filter() method works as well:

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

Or use .not() to remove the one submenu from the to-be-hidden items:

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

I tested all three in your fiddle. I can’t really say which one I like best, though.