Keep the ul directly under a class open using jquery

Question

I have the following bit o' jquery:

    // Code for Side Navigation
    $("#sideNav ul li:not(:has(li.current))")
   .find("ul").hide().end() // Hide all other ULs
   .hoverIntent(
        function(){
            $(this).children('ul').slideDown('fast');
        },
        function(){
         //  $(this).children('ul').slideUp('fast');
        }
    );

It slides a nav up and down, leaving any li with the class current open. I would like to change it so if an li has a class current, the ul directly beneath it would be open too, but others below that level would remain closed.

Here is the HTML structure:

<ul>
    <li>Category 1
        <ul>
            <li class="current">Currently Open
                <ul>
                    <li>Sub Cat 1 - should show
                        <ul><li>Should not Show</li></ul>
                    </li>
                    <li>Sub Cat 2 - should show</li> 
            </li>
        </ul>
    </li>
    <li> Category 2
        <ul><li>Should not Show></li></ul>
    </li>
</ul>

Answer 1

First off, you need to fix your html. the second nested UL isn't closed. The second is to assign all the LI elements in the current trail the .current class.

<ul>
<li class="current">Category 1
    <ul>
        <li class="current">Currently Open
            <ul>
                <li>Sub Cat 1 - should show
                    <ul><li>Should not Show</li></ul>
                </li>
                <li>Sub Cat 2 - should show</li> 
            </ul>
        </li>
    </ul>
</li>
<li> Category 2
    <ul><li>Should not Show</li></ul>
</li>

Then use this css

    li.current>ul{
    display : block;
}

li ul{
    display : none;
}

That should fix your problem without javascript. Is this what you seek?

If you need to add a hover effect all you need to do is add the .current class to li being hovered.

I have added some inspirational jquery code(haven't tested it) that should help you:

    $('li:has(ul)').bind('mousein',function(){
    $(this).find('ul').slideDown();
});
$('li:has(ul)').bind('mouseout',function(){
    $(this).find('ul').slideUp();
});

Answer 2

Figure it out:

Added

$("#sideNav ul li.topCurrent").find("ul").show();
$("#sideNav ul li.topCurrent").find("ul li:not(:has(li.current)) ul").hide();

to the bottom of the jquery code.