jquery下拉菜单，切换类

Posted 2023-05-09

【中文标题】jquery下拉菜单，切换类

【英文标题】：jquery dropdown menu, toggling classes

【发布时间】：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 标记

【参考方案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