0

我想添加一个类来列出具有特殊类但不在其嵌套 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 处于活动状态，我希望所有具有“顶级”类的 li 更改它们的颜色。

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

现在样式被附加到每个元素，我只想要我的 .top li 上的样式。

此外，当另一个主题菜单中的链接处于活动状态时，我想删除该类。（只能有一个活动链接，前一个变为非活动链接，我已经这样做了。）。

FIDDLE，不过还有一些额外的东西。jQuery 函数位于底部。.textcolor 样式带有红色背景，可以直接查看更改。

编辑：建议的答案都不起作用。我不知道我是否遗漏了什么，但如果我在我的小提琴中尝试下面的代码，它就是行不通。对此有什么想法吗？

4

4 回答 4

1

您可以使用子选择器：

ul>li

这仅影响作为 ul 的直接子级的 li。您也可以在 jquery 中使用此选择器（查看http://api.jquery.com/child-selector/）

于 2013-04-29T22:07:58.387 回答
0

我认为您需要添加另一个语句来设置当时所有孩子的背景色。

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

显然，您将需要另一个notextcolor具有您想要的样式的 CSS 类。

编辑： - 刚刚注意到你也有top第二级 - 所以这只会从第三级开始应用，除非你改变它。

于 2013-04-29T22:25:19.073 回答
0

你可以写这样的东西 

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

对于每个<a>有.active类的，它会在里面#nav找到最顶层的父类top并添加textcolor类。

于 2013-04-29T22:11:34.620 回答
0

假设我正确理解了这个问题，您可以尝试将一个类添加到其他lis（即，在您的示例代码中没有类的那些）并为该类定义不应更改的属性。

基本上，您不希望lis 从其父母那里继承的任何东西都应该明确定义（颜色、背景颜色、文本装饰等）

于 2013-04-29T22:12:12.980 回答