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

：visible在执行动画时始终返回true

1 个答案: