Javascript jquery下拉菜单，切换类

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

---

这是因为您首先使用以下代码删除所有

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

---

这是一个有用的工具：

这是因为您首先要删除所有

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

---

这是一个有用的工具：

显示html标记显示html标记