Question

我想添加一个类来列出具有特殊类的元素，但不是它们的嵌套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样式有红色背景，可直接查看更改。

编辑：没有任何建议的答案正在发挥作用。我不知道我是否遗漏了什么东西，但是如果我在我的小提琴中尝试下面的代码，它就不起作用了。关于这个的任何想法？

Answer 1

您可以使用子选择器：

ul>li

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

Answer 2

你可以写这样的东西

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，找到最高级别的父级{{1}}并将{{1}}类添加到

Answer 3

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

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

Answer 4

我认为你需要添加另一个声明来设置当时所有孩子的背景颜色。

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

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

编辑： - 只是注意到你在第二级也有top - 所以这只会从第3级下来，除非你改变它。

在没有嵌套ul的情况下将css样式添加到某些li

4 个答案: