Question

我有一个下拉菜单，并且在点击时使用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;
}

Answer 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

jquery下拉菜单，切换类

1 个答案: