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: 268

Filed under:

css

|

jQuery

|

html

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)?

Developer IT