jquery下拉菜单，切换类

Question

我有一个下拉菜单，使用jQuery在点击时切换类。所以当我单击时，它的父级

变为活动的，从而使用CSS显示它的子菜单。我的问题是，这里的removeClass的目的是要删除任何已经打开的子菜单中的active类。

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

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

这是因为您首先要删除所有li标记上的active类，使用以下代码：

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