Question

我正在制作一个下拉菜单，并试图使列表项目图像从加号（未打开时）变为减号（打开时）。

第一层（父列表项）设置为list-style:none;所以当下面的.click()执行时，我希望.addClass('close');适用于除<li>之外的所有内容的...

问题是，包含.click()函数中使用的选择器包括父列表项。

我需要做的是：

“将课程'关闭'应用于$（this）除了第一个（父）<li>'s'”

这是jQuery：

$(document).ready(function(){

  $("#nav li").click(function(event){

    // My attempt (not working)...
    $(this).not("#nav > ul > li").addClass('close');

    event.stopPropagation();
    $(this).children("ul").slideToggle(100);

    $(".last, a").click(function(event){
      event.stopPropagation();
    });

  });

});

jsFiddle ：

Click to View

所以我的尝试如下：

$(this).not("#nav > ul > li").addClass('close');

那不起作用......所以如果有人有任何建议，我将不胜感激！谢谢:)）

更新

需要添加“{close”类才需要!important。 jQuery正在做它应该做的事情。关闭菜单项后，当我成功删除课程时，我会发一个答案。

更新（2）：

删除!important并将类规范更改为#nav li.close。谢谢Adeneo！

更新（3）：

将.addClass()更改为.toggleClass()。似乎让这个菜单做我想要的:)谢谢Sushanth - 这个建议！

Answer 1

使用css选择器，您的问题不够具体。

使用#nav li比.close更具体，修复问题使用#nav li.close（不是！重要）：

#nav li.close {
    list-style-image:url(http://www.horsepowerfreaks.com/images/close.gif);
}

FIDDLE

以下是CSS specificity and inheritance

的更多内容

Answer 2

使用.toggleClass()

$(this).not("#nav > ul > li").toggleClass('close');

假设您没有在代码中的任何其他位置添加/删除您的课程

如何从选择器中包含的jQuery函数中排除元素？

2 个答案: