0

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

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

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

我需要做的是说：

“将类 'close' 应用于 $(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：

点击查看

所以我的尝试如下：

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

那没有用...因此，如果有人有任何建议，将不胜感激！谢谢 ：）

更新：

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

更新（2）：

删除!important并将类规范更改为#nav li.close. 谢谢阿德尼奥！

更新（3）：

改为。.addClass()_ .toggleClass()似乎让这个菜单做我想做的事情：）谢谢 Sushanth——这个建议！

4

2 回答 2

3

您的问题对 css 选择器不够具体。

using#nav li比 just 更具体.close，解决问题使用#nav li.close（不是！重要）：

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

小提琴

这是关于CSS 特异性和继承的更多内容

于 2012-11-06T21:09:01.647 回答
2

采用.toggleClass()

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

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

于 2012-11-06T21:06:53.263 回答