Question

我有一个动画菜单的脚本。如果菜单包含具有活动类（.active）的对象，我不希望它。我无法弄清楚。我尝试过几件事，但我想我错了。你能救我吗？

这是剧本：

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

这是标记：

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

如果UL 包含一个活动类，我希望它默认显示，而LI（父）则获得.active-class。

它有意义吗？

*的 编辑： *

如果主UL包含.active-class的子（或childs子），则脚本不会运行。我想这是一个IF / THEN问题？但我不知道如何写它。

而且......

如果“UL LI UL LI A ”处于活动状态，则应提供“UL LI ”（父母，父母，父母：D）.active class。我该怎么做呢？

提前谢谢你...... :)

Answer 1

首先，将.active类分配给父UL元素。您只需更改下面的选择器即可迭代您的UL元素，并将.active类添加到其父LI元素中：

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

这将确保您的所有.active代码都不会被动画显示：

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

Answer 2

您可以使用jQuery的：not（）选择器进行尝试。

http://api.jquery.com/not-selector/

e.g。选择li不包含活动类： $（'＃navigation ul li：not（.active）'）。each ...

编辑：

你可以像这样添加一个if子句：

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

2。

$('ul li').has('ul li a.active').addClass('active');

这样的事情应该有效。

结帐：http://api.jquery.com/size/，http://api.jquery.com/addClass/，http://api.jquery.com/has/

Answer 3

将:not(.active)添加到您的选择器。

Answer 4

我相信这就是你想要的。

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

jquery：如果脚本包含.active，则不要运行脚本

4 个答案: