Question

我有以下问题。当我点击任何li元素时，它会添加类激活，但是当我单击li元素以展开第二级菜单时，它会添加类激活并且这是正确的但是当我单击例如二级链接时它会添加类激活但是父类li仍然在内部仍然有类活动如何删除此类???

<ul class="nav-stacked">
<li><a href="#">Link</a>
<li><a href="#">Link 1</a>
<li><a href="#">Link 2</a>
<ul class="dropdown">
<li><a href="#">Second Level Link</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
</ul>

jquery的

        $(".nav-stacked > li").click(function() {
        $(".nav-stacked > li").removeClass("active");
        $(this).addClass("active");
        });

Answer 1

为什么不尝试删除所有活动类并再次添加活动类？

$(".nav-stacked > li").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
    });

Answer 2

 try this:
 $(".nav-stacked > li").click(function() {
   $(".active").each(function(){
     $(this).removeClass("active");
   });
    $(this).addClass("active");
});

Answer 3

我一整天都在研究同样的问题。我正试图为标签空间制作一个侧面菜单。

我尝试点击任意节点获取根节点，然后删除“活动”节点。来自拥有它的所有节点的类。最后，我将“活动类”添加到当前节点。

jsfiddle Demo

$(".nav-stacked > li").click(function() {

    var firstUL = document.getElementById("sidebar"); //get root node
    var listItem = firstUL.getElementsByTagName("li"); //get all child li

    //loop through childen and remove  active from all that have it.
    for (var i=0; i < listItem.length; i++) {
        console.log(listItem[i].id);

        if(listItem[i].className == "active"){
        $(listItem[i].id).removeClass("active");
        }
        else
        console.log(listItem[i].id + ' does not have active class');
    }

    $(this).addClass("active");

});

这会删除“活跃”字样。来自所有元素，但它没有添加它因为＆＃39;这个＆＃39;似乎总是一个父节点，而不是点击的节点。

另一方面，我找到了一个适合我的解决方案，我想我会分享它，因为它很简单，我一开始也没想过。

不要使用嵌套的ul元素或js。制作一个ul，填充li，并添加＆＃39;子项＆＃39;类所有被认为是子元素的元素。最后写一些缩进子项的CSS。

如果这不是您要使用的外观/功能，请忽略 Jsfiddle Demo

从手风琴中的第一个父级移除活动类

3 个答案: