1

我有一个下拉菜单，并在单击时使用 jQuery 切换类。因此，当我单击 时<a>，它的父级<li>变为活动状态，从而使用 css 显示其子菜单。我的问题是，RemoveClass这里的目的是它会删除active已经打开的子菜单中的类。

问题是当我<a>再次单击时，它并没有关闭当前的子菜单，即它似乎没有切换，只是添加了类。

$("#pop-out-left ul li a").click(function () {
    $("#pop-out-left ul li").removeClass("active");
    $(this).parent().toggleClass("active");

    });

这是CSS ..

#pop-out-left > ul > li.active > a + ul {
display: block;
}
4

1 回答 1

1

这是因为您开始使用以下代码删除active所有li标签上的类：

$("#pop-out-left ul li").removeClass("active");

然后，当您切换时，该类将再次添加。这意味着第二次单击只是重复第一种情况。

要解决它，只需更改上面的语句以排除单击的项目，如下所示：

$("#pop-out-left ul li a").click(function () {
    $("#pop-out-left ul li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});

这是一个工作小提琴：jsfiddle.net/dDhYu

于 2013-03-08T09:44:16.820 回答