Keep the ul directly under a class open using jquery

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>
 开发者_如何学Go                   </li>
                    <li>Sub Cat 2 - should show</li> 
            </li>
        </ul>
    </li>
    <li> Category 2
        <ul><li>Should not Show></li></ul>
    </li>
</ul>

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.

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();
});