:visible всегда возвращает true при выполнении анимации

Question

У меня есть 4 выпадающих списка меню, которые я связываю щелчком, который вызывает функцию, которая переключает элементы списка.

Если я нажму на все 4 меню, все 4 элемента списка будут отображаться. Тем не менее, я хочу сделать так, чтобы при щелчке по самим элементам остальная часть текущего меню должна переключаться и скрываться.

Вот как я делаю проверку, но она не работает.

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

Answer 1

Вы можете установить свойство для вашего объекта во время анимации и отфильтровать его:

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'); });