-1

我今天正在制作菜单，偶然发现了这个奇怪的案例，其 HTML 如下：

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

然后我使用了以下js：

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

当我这样做时，该类只会应用于 external <li>，但我希望它同时应用于 parent 和 child LI。

现在我的问题是，我该如何处理这个“返回”，以便将这些类应用于父级和子级LI？

js 如何处理这些类型的选择器？该事件是否真的运行了两次并删除了设置的最后一个类？

4

3 回答 3

4

问题是$('#list1 li')可以选择内部的两个级别的li标签#list并将点击处理程序应用于两者。此外，您允许点击向上传播，因此不仅仅是您点击的人可以看到它。

如果您只想要外部级别，那么您应该使用这样的直接子规范。这将隔离实际安装的点击处理程序：

$("#list > ul > li")

这只会获得顶级li标签。而且，整个代码看起来像这样：

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

如果您想将 removeClass 操作隔离到同一级别的其他 LI 标记，而不是整个文档，那么您可以使用以下内容：

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

你的评论让我对你想要点击的这个 LI 标签有点困惑。如果您确实希望较低级别可单击，然后将列表项类应用于被单击的级别和父 LI，那么您可以这样做：

$('#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
});
于 2012-04-09T22:57:07.273 回答
1

jQuery 是否对元素列表中的一个元素或所有元素应用方法取决于方法。

.click()并且.addClass()都将应用于选择器中的所有 jQuery 对象。

li在您的情况下，点击处理程序应用于#list. $(this)适用于li被点击的具体内容。

但是，您有嵌套li元素，这意味着当您单击内部嵌套时会触发多个单击处理程序li，包括嵌套的li和它的父级li。

要防止此事件通过 dom 树传播，请在单击处理程序中调用 stopPropagation()：

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

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

您也可以return false从您的处理程序中停止传播并阻止默认操作。这是特定于 jQuery 的。

于 2012-04-09T22:57:23.553 回答
0

如果您要添加“当前”页面样式：

$('#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
});
于 2012-04-09T22:57:26.010 回答