I have the following list structure:
<ul>
<li>One</li>
<li class="topActive">Two
<ul>
<li class="active">Two-1
<ul>
<li>Two-1-1</li>
</ul>
</li>
<li>Two-2</li>
</ul>
</li>
<li>Three
<ul>
<li>Three-1</li>
</ul>
</li>
</ul>
with the following jQuery:
$("ul>li>ul").hide();
$("ul>li>ul>li>ul").hide();
$("ul>li>ul>li>ul>ul>li").hide();
$('.active').parents().show();?????????
$("ul>li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
$("ul>li>ul>li").hoverIntent(
function(){
$(this).children('ul').slideDown('fast');
},
function(){
$(this).children('ul').slideUp('fast');
}
);
What I would like is this:
When an li class is topActive, everything within that class down to the current class can not be affected by the jQuery that causes the list to slide up and down.
so in the case provided the following would show, along with the top level:
One
Two
Two-1
Two-2
Three
And when I mouse over either, Two, or Two-1 or Two-2 nothing happens, but if I mouse over Three, the jQuery will cause it to slide up or slide down.
In this example:
<ul>
<li>One</li>
<li class="topActive">Two
<ul>
<li class="active">Two-1
<ul>
<li>Two-1-1</li>
</ul>
</li>
<li>Two-2</li>
</ul>
</li>
<li>Three
<ul>
<li>Three-1</li>
</ul>
</li>
</ul>
When I mouseover Two-1, it will slide down, but when I mouse out Two-1 will remain.
One
Two
Two-1
Two-2
Three
Any suggestsions for either a CSS or jQuery implementation (or mixture of the two)?
