jQuery apply functionality only to class and parent elements.

Posted by kylex on Stack Overflow See other posts from Stack Overflow or by kylex
Published on 2010-05-18T19:00:45Z Indexed on 2010/05/18 19:30 UTC
Read the original article Hit count: 145

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about css