jquery下拉菜单，切换类答案

【问题标题】：jquery dropdown menu, toggling classesjquery下拉菜单，切换类
【发布时间】：2013-02-23 19:19:57
【问题描述】：

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

【问题讨论】：

显示您的 html 标记

标签： javascript jquery css

【解决方案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

【讨论】：