Question

我今天正在做一个菜单,我 st倒了这一令人难过的案子,其次为超文本:

<div id="list1">
    <ul>
        <li>1</li>
        <li>2 - Here is a Submenu
            <ul>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
    </ul>
</div>

接着,我使用了以下小 the:

$( #list1 li ).click(function(){
   $( .list-item ).removeClass( list-item );
   $(this).addClass( list-item );
});

当我这样做时,这一类别将只适用于外部<代码><li>,但我希望适用于母子和子女<代码>。缩略语

现在我的问题是,我如何能够处理这一“回归者”问题,因此,我对父母和儿童都适用这几类课程。缩略语

如何处置这些类型的甄选人员? 活动是否真正翻开了两倍,取消了最后一类活动?

Answer 1

问题是,<代码>$(#list1 li >可在li内选取/li>#list内标的两级,并对两者适用点击手。此外,你允许点击传播,这样就只能看到你点击的点击。

If you only want the outer level, then you should use direct child specifications like this. and that will isolate what click handler is actually installed:

$("#list > ul > li")

这只能达到顶级<代码>li。而整个法典也希望这样做:

$( #list1 > ul > li ).click(function(){
   $( .list-item ).removeClass( list-item );
   $(this).addClass( list-item );
});

如果你想要把清除地雷的行动孤立到其他电离层上,而不是在整个文件中,那么你就能够使用这样的东西:

$( #list1 > ul > li ).click(function(){
   $(this).addClass( list-item ).siblings().removeClass( list-item );
});

你的评论使我对你想要点击的这个低收入国家感到困惑。如果你实际上想要点击较低职等,然后将清单类别应用于被点击的一方和母公司,那么你就可以这样做:

$( #list1 > ul > li > ul > li ).click(function() {
   $("#list1 .list-item").removeClass( list-item );
   $(this).parents("li").add(this).addClass( list-item );
   return(false);   // stop event propagation
});

Answer 2

无论是否采用“质量”方法,都取决于该方法。

<.click(>和.addClass()将同时适用于贵方所有舱面物体。

在您的情形下,对<代码>li的所有要素均适用了点击手码<>#list/code>。$(this)适用于点击的具体li。

<>However, 您登上了li 内容,这意味着在你点击带内nes的<代码>li时,多点处理器便发射,同时标有<>li 和括号>。

为了防止通过大树传播这一活动,在你点击手中发出停播电话:

$( #list1 li ).click(function(e){
   e.stopPropagation();

   $( .list-item ).removeClass( list-item );
   $(this).addClass( list-item );
});

你还可以从你的手稿中return不实,这阻止了宣传,防止了违约行动。具体来说,这是 j。

Answer 3

如果你增加“当前”页体:

$( #list1 > ul > li ).on( click ,function(){
   $(this).addClass( list-item )    //adds class to clicked item
        .siblings()                 //find the others of the same level
        .removeClass( list-item );  //remove their styles
});

友情链接