jquery下拉菜单，切换类

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

这是因为你开始对所有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