如何從包含在選擇器中的jQuery函數中排除元素？

我正在做一個下拉菜單，並試圖將列表項目圖像從加號（未打開時）更改爲減號（打開時）。如何從包含在選擇器中的jQuery函數中排除元素？

第一層（父列表項）設置爲list-style:none;所以當下面執行.click()，我希望.addClass('close');適用於一切，除了家長<li>的...

的問題是，選擇用於包含.click()函數的函數包括父列表項。

我需要做的是說：

「應用類 '關閉'，以$（本）除第（父）<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');

那沒有工作......因此，如果任何人有任何建議，將不勝感激！謝謝:)

更新：

類 '關閉' 需要!important添加到它。 jQuery正在做它應該做的事情。當我在關閉菜單項目後成功移除課程時，我會發布答案。

更新（2）：

移除!important和改變的類規範#nav li.close。感謝Adeneo！

更新（3）：

更改.addClass()到.toggleClass()。似乎使這個菜單做我想要的:)感謝Sushanth--對於這個建議！

來源

2012-11-06 derekmx271

這似乎是工作。 'close'類不適用於頂級'li's –

增加！對'close'類非常重要，它應用' - '列表樣式圖像。現在，我只需要在關閉元素時刪除類... – derekmx271

@Asad - 我剛剛意識到我的CSS是問題，而不是jQuery ...需要！close類中的重要內容。 – derekmx271

您的問題是不是與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

來源

2012-11-06 21:09:01 adeneo

非常酷。我沒有意識到這與僅僅指定.close完全不同。始終使用！過去很重要。涼！ – derekmx271

已更新jsFiddle以包含此更改 – derekmx271

如果您知道繼承和特定性規則，則實際上不需要使用！important或z-index來修復有問題的CSS，因此您應該瞭解它的工作原理，至少知道特定時間是一個問題，就像在這種情況下一樣。 – adeneo

使用.toggleClass()

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

假設您不添加/刪除你的類別的地方在你的代碼

來源

2012-11-06 21:06:53

只要記住要確保你沒有改變其他地方的類，否則'slideToggle'和' toggleClass'可能最終不同步。 –

@Asad ..這是一個好點..將添加到該職位 –

美麗！似乎要做的伎倆。將更新jsFiddle使用這個！謝謝:) – derekmx271

如何從包含在選擇器中的jQuery函數中排除元素？

回答

相關問題