删除点击问题上的活动类答案

【问题标题】：Removing active class on click issue删除点击问题上的活动类
【发布时间】：2016-03-24 12:42:46
【问题描述】：

我正在处理的项目中有一些过滤器，一旦单击，它就会被赋予 active 类，然后它将在单击的列表项中显示一个名为 info-pane 的 div。

过滤器是 6 个蓝色框。我正在使用下面的 jQuery 添加和删除活动类，但是当我想尝试通过单击具有活动类状态但似乎不起作用的列表项来删除活动类时，问题就出现了。

我正在尝试的代码；

$(".filters > ul > li").click(function() {
    $(".filters > ul > li").removeClass("active");
    $(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
    $(this).removeClass("active");
});

这是现场项目的链接； http://client.n8geeks.com/

【问题讨论】：

你能创建一个 plnkr 或 fiddler 来反映你的问题吗？
也添加必要的html
我添加了一个指向实时代码的链接，我认为这样查看更容易吗？如果你仍然喜欢我可以创建一个小提琴。
你应该结合两个点击功能。
点击事件不会在代码运行后神奇地绑定到元素。这就像一个人已经叫了你的名字之后走进一个房间。除非他们再次大喊，否则您永远不会听到他们呼唤您的名字。

标签： javascript jquery html

【解决方案1】：

试试这个：

$(".filters > ul > li").click(function() {
    $(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});

【讨论】：

【解决方案2】：

首先，您不需要为该点击创建两个事件。这是一个例子。但我看不出你的问题出在哪里。在您的实时项目中，我可以看到您单击后过滤器发生了变化..？

$(".filters > ul > li").click(function() {
        $(".filters").find('li').removeClass('active');    
        $(this).addClass("active");
    });

编辑：

我不知道我是否理解正确，但是当您单击“x”时，我可以看到没有任何反应.. 重置您的过滤器的功能。

（未经测试）

$(".close").click(function(){
  $(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
    $(this).prop('checked', false);
  });   
});

【讨论】：