Question

I have a script that animates a menu. I don’t want it to if the menu contains an object with an active class (.active). I can’t figure it out. I have tried several things, but I guess I’m thinking all wrong. Can you help me?

This is the script:

$('#navigation .toplevel, #navigation > ul > li').each(function(idx) {
    $(this).delay( idx * 600 ).fadeIn( 600 );
});

This is the markup:

<div id="navigation">
        <a href="#" class="toplevel">Menu</a>
        <ul class="undermenu"> 
            <li><a href="#">1.0 Menuitem</a>             
                <ul> 
                    <li><a href="#" class="active">1.1 Menuitem</a></li>                     
                    <li><a href="#">1.2 Menuitem</a></li>
                </ul> 
            </li>
            <li><a href="#">2.0 Menuitem</a>             
                <ul> 
                    <li><a href="#">2.1 Menuitem</a></li>                     
                    <li><a href="#">2.2 Menuitem</a></li>
                </ul> </li> 
        </ul> 
</div>

If an UL does contain an active-class, I want it to be shown per default and the LI (the parent) to get an .active-class.

Does it make any sense?

*EDIT:*

The script shall not run if the main UL contains a child (or a childs child) with .active-class. I guess it’s a IF/THEN matter? But I don’t know how to write it.

And…

If “UL LI UL LI A” is active the “UL LI” (parents, parents, parent :D) should be given .active class. How do I do this?

Thank you in advance… 🙂

Answer 1

First, to assign the .active class to parent UL elements. You can simply change the selector below to iterate over your UL elements and add the .active class to their parent LI elements:

$('#navigation > ul > li .active').each(function(){
     $(this).parent().addClass('active');
 });

This will ensure that none of your .active tags are animated:

$('#navigation .toplevel, #navigation > ul > li').not('.active').each(function(idx) { 
    $(this).delay( idx * 600 ).fadeIn( 600 ); 
});