Question

我有一个使用bootstrap的菜单，第一个菜单项有一个“.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>

JS

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

Answer 1

您正在删除类而不是ID：

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

而不是：

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

更新：

为了确保孩子li没有上课，你可以这样做：

＆＃13;

$("#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");
     }
});

＆＃13;

当然，你可以重新编写你的html，使jQuery选择器不那么麻烦。

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

1 个答案: