将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

回答

相关问题