I have the following list:
<ul>
<li class="topCurrent">One
<ul>
<li>One-1
<ul>
<li>One-1.1
<ul>
<li class="
current">One-1.1.1
<ul>
<li>One-1.1.1.1</li>
<li>One-1.1.1.2</li>
<li>One-1.1.1.3</li>
</ul>
</li>
<li>One-1.1.2</li>
</ul>
</li>
<li>One-1.2</li>
</ul>
</li>
<li>One-2</li>
<li>One-3</li>
</ul>
</li>
<li>Two
<ul>
<li>Two-1</li>
<li>Two-2</li>
</ul>
</li>
Using the following jQuery:
$("ul li ul").hide();
$("ul li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
What this does is hide all of the ul below the top level ul until there is a hover over it.
What I would like to do is this:
If an li has a class="
current" I would like that structure to be open up until the point that
current is hit. It would still allow the ul below it to be displayed on a hover, as well as any other ul's, but at no point would the parents of class="
current" be hidden.
Suggestions? This problem has been driving me crazy.
Thanks!
