將css樣式添加到某個沒有嵌套的li ul

我想要添加一個類來列出具有特殊類的元素，但不在它們的嵌套ul上。將css樣式添加到某個沒有嵌套的li ul

<div id="nav">  
    <ul>    
     <li class="closed top">Topic 1 
      <ul>    
       <li class="closed top">Subtopic 1 
        <ul> 
         <li><a href="#" id="k0" class="link active">Link 1</a></li> 
         <li><a href="#" id="k1" class="link inactive">Link 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="closed top">Topic 2 
      <ul>    
       <li class="closed top">Subtopic 1 
        <ul> 
         <li><a href="#" id="l0" class="link inactive">Link 1</a></li> 
         <li><a href="#" id="l1" class="link inactive">Link 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li>   
    </ul> 
</div>

如果例如鏈接1是活動的，我希望所有的'頂'類的李改變他們的顏色。

if ($('#nav a').hasClass('active')) {   
    $('li.top').addClass('textcolor'); 
}

現在樣式被追加到每個元素，我只想要我的.top li的樣式。

此外，我想要在另一主題菜單中的鏈接處於活動狀態時刪除該類。（只能有一個活動鏈接，前一個鏈接變爲非活動鏈接，我已經這樣做了。）。

FIDDLE，雖然有一些額外的東西。 jQuery函數位於底部。 .textcolor樣式有紅色背景可直接查看更改。

編輯：沒有任何建議的答案正在工作。我不知道我是否錯過了一些東西，但是如果我在下面的代碼中嘗試下面的代碼，它只是不起作用。對此有何想法？

來源

2013-04-29 sqe

你的第二級也有班級「頂」。你可以使用'ul> li'來設置'ul'的直接子類。如果這樣做不起作用，你可能需要取消後代的風格。 – mpen 2013-04-29 22:11:13

你可以使用子選擇：

ul>li

這隻會影響力認爲是UL的直接孩子。您可以使用此選擇在jQuery的太（看http://api.jquery.com/child-selector/）

來源

2013-04-29 22:07:58 max

我試過了，但是 'if（$（'＃nav a'）。hasClass（'active'））{（'＃nav> ul> li.top'）。addClass（'textcolor'）; }' 不起作用。 – sqe 2013-04-29 22:11:58

我製作了[小提琴]（http：// jsfiddle。淨/ 7NV5R/1 /）並嘗試了另一種方法。它有效，但我不確定這是你的目標。我認爲使用應用於項目的點擊事件會更好 – max 2013-05-01 09:21:43

你可以寫這樣的事情

if ($('#nav a.active').length) { 
    $('#nav a.active').parents('.top').filter(function(){ 
     return $(this).parents('.top').length == 0 
    }).addClass('textcolor') 
}

會，對於具有.active類中的每個<a>，裏面#nav，找到最頂端的父母與類top並添加textcolor類。

來源

2013-04-29 22:11:34 Ejaz

假設我正確地理解了這個問題，您可以嘗試向另一個li s（即您的示例代碼中沒有類的那個）添加一個類，併爲該類定義不應更改的屬性。

基本上，任何你不想li s到從父母繼承，應明確定義（顏色，背景顏色，文字，裝飾等）

來源

2013-04-29 22:12:12

我認爲你需要添加另一個聲明，設置所有孩子當時的背景顏色。

if ($('#nav a').hasClass('active')) {   
    $('li.top').addClass('textcolor'); 
    $('li.top').children().addClass('notextcolor'); 
}

很明顯，您將需要另一個名爲notextcolor的CSS類，它具有您想要的樣式。

編輯： - 只是注意到你在第二級也有top - 所以這將只適用於從第三級下來，除非你改變這一點。

來源

2013-04-29 22:25:19 PeteGO

將css樣式添加到某個沒有嵌套的li ul

回答

相關問題