从手风琴的第一个父母中删除活跃的班级答案

【问题标题】：remove class active from first parent in accordion从手风琴的第一个父母中删除活跃的班级
【发布时间】：2014-05-22 23:43:12
【问题描述】：

我有以下问题。当我单击任何 li 元素时，它会添加活动类，但是当我单击 li 元素以展开二级菜单时，它会添加活动类，这是正确的，但是当我单击例如二级链接时，它会添加活动类，但是内部带有 ul 的父 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");
        });

【问题讨论】：

不清楚你在问什么......我在这里没有看到将类添加到ul 的代码，从我看到它的地方你的事件的行为是预期的...... . 你能做一个 jsFiddle 重现这个问题吗？

标签： jquery class accordion parent

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

您应该在代码中添加一些解释。
首先您应该从所有元素中删除“活动”类，然后将该类添加到所需元素。这可能会对您有所帮助。

【解决方案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");

});

这确实从所有元素中删除了“活动”，但在添加它时失败了，因为“这个”似乎总是一个父节点，而不是被点击的节点。

在旁注中，我找到了一个适合我的解决方案，我想我会分享它，因为它非常简单，我一开始也没有考虑过。

不要使用嵌套的 ul 元素或 js。制作一个 ul，用 li 填充，并将“subitem”类添加到所有被视为子元素的元素中。最后写一些缩进子项的css。

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

【讨论】：