:visible always returns true when doing animate

i have 4 menu drop down list that i bind a click that calls to a function that toggles the list items.

If i click on all 4 menus all 4 list items will be toggled to show. However, i want to make it so that when i click on the items itself, the rest of the menu that are current showing should toggle and hide.

heres how i do the check but it doesnt seem to work.

javascript:

test.$sections //$('#nav').find('>li') 
    .find('ul')
    .filter(':visible')
        .parent()
    .each(test.toggleItemNav);

'toggleItemNav' : function() {
var $li = $(this);
$li.find('ul')
.stop(true, true
.animate({ opacity: 'toggle', height: 'toggle' },{duration: 800, specialEasing: { opacity:'easeOutExpo', height: 'easeOutExpo' }});

},

html

<ul id="nav">
    <li class="11">11
        <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
        </ul>
    </li>
     &l开发者_Go百科t;li class="22">22
        <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
        </ul>
    </li> .... and so  on

You could set a property on your object while animating and filter that out:

test.$sections.find('ul:visible:not([animating="true"])');
...

var $ul = $li.find('ul');
$ul.attr('animating', 'true');
...
$ul.animate(/* your params */, function () { $ul.attr('animating', 'false'); });