在项目单击时添加和删除活动类答案

【问题标题】：Add and remove active class on item click在项目单击时添加和删除活动类
【发布时间】：2018-01-05 21:53:09
【问题描述】：

我有一个使用引导程序的菜单，其中第一个菜单项有一个类“.active”。但是我想在单击其他项目时删除此“.active”类并将活动类添加到单击的项目中。此外，如果单击子菜单项，我想将“.active”类添加到主列表项而不是单击的子项。

我有下面的代码，但它不能正常工作。你知道怎么解决吗？

html

<nav id="nav">
    <ul class="">
        <li class="active"><a href="url">Item 0</a></li>
        <li>
            <a href="#edit" data-toggle="collapse" aria-expanded="false">
               Item 1
            </a>
            <ul class="collapse" id="edit">
                <li><a href="/create">Create</a></li>
                <li><a href="/edit">Edit</a></li>
            </ul>
        </li>
        <li><a href="/posts">Item 1</a></li>
        <li><a href="/categories">Item 2</a></li>
    </ul>
</nav>

 $("#nav li").on("click", function() {
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

您正在删除类而不是 id：

$(".nav li").removeClass("active");

代替：

$("#nav li").removeClass("active");

更新：

为确保lis 的孩子不会上课，您可以这样做：

$("#nav li").on("click", function(e) {
     e.preventDefault();
     if ($(this).parent().hasClass('collapse')) {
        $(this).parent().parent().addClass("active");
     } else {
       $("#nav li").removeClass("active");
       $(this).addClass("active");
     }
});

当然，你可以重写你的 html 来减少 jQuery 选择器的繁琐。

【讨论】：

谢谢，但它不能正常工作。单击菜单项时，由于应用了 .active 类，背景颜色变为白色。但是白色背景颜色会变为以前的颜色，并且由于 .active 类，第一个菜单项再次变为背景颜色白色。
这让我很困惑——你能把它放在小提琴里吗？目前尚不清楚您在寻找什么。
例如，第一个项目具有活动类，但是当单击“项目 2”例如我想从第一个列表项中删除 .active 类并将活动类赋予单击的项目以通知用户在该菜单项中。但是要使它起作用，可能需要对 url 进行一些处理，所以也许不可能放在一个小提琴中。
jsfiddle.net/4a2oxL92 注意活动类是如何应用于子菜单的父级而不是子菜单lis。复制问题时，链接应该无关紧要。只需像我在小提琴中那样添加e.preventDefault();。正如您所解释的，小提琴正是这样做的。