In the following list, how do I prevent jQuery from interacting with part of it.
Posted
by kylex
on Stack Overflow
See other posts from Stack Overflow
or by kylex
Published on 2010-05-18T14:42:24Z
Indexed on
2010/05/18
15:50 UTC
Read the original article
Hit count: 264
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)?
© Stack Overflow or respective owner