更新

Question

我正在处理点击事件，这个事件非常标准。

on.click：从所有列表项中删除活动类，然后将active添加到单击的列表项。

即

var li = $('.child-item');
li.click(function(){
  li.removeClass('active');
  li.addClass('active');
});

按预期工作。但是，我还需要一个条件，如果再次单击活动类，它将从单击的项目中删除活动类。

我试过了：

$('.child-item').toggle(function(e){

   $('.child-item').removeClass('active');
   $(this).addClass('active');

}, function() {
   $('.child-item').removeClass('active');
   $(this).removeClass('active');           
});

但通常切换处于关闭状态，因此需要双击才能使切换回到正轨。这似乎是一个非常直接的解决方案，但我似乎无法让它发挥作用。

Added a jsFiddle here with another option。这适用于单击相同元素的情况，但不会在每次单击时清除所有活动类。

更新

我得到了它的工作，但TrueBlueAussie的答案越来越短。这是我的工作小提琴： https://jsfiddle.net/v7b8cbj5/

Answer 1

var li = $('.child-item');
li.click(function(){
  li.removeClass('active');
  $(this).toggleClass('active');
});

Answer 2

您的第二个点击处理程序仅会附加到匹配的＆＃34;有效＆＃34;事件被注册时的项目。

将此全部替换为：

$('.child-item').click(function(e){
   $('.child-item.active').not(this).removeClass('active');    
    $(this).toggleClass('active');
});

您可以使用not()从所选事物列表中排除当前项目以使其处于非活动状态，然后只需切换选定的项目。

JSFiddle： https://jsfiddle.net/81ex7dmm/2/

Answer 3

.toggle() （事件） - 在jQuery 1.8中弃用，在jQuery 1.9中删除

在add() toggleClass()上使用.active <li>

$('.child-item').click(function(e){
    $('li.child-item.active').add(this).toggleClass('active');
});

<强> Updated Fiddle

Answer 4

也尝试一下：

$('.child-item').click(function(e){
   $('.child-item.active').removeClass('active');    
    $(this).addClass('active');
});

FIDDLE DEMO

添加和删除点击事件的类

更新

4 个答案:

添加和删​​除点击事件的类

更新

4 个答案:

添加和删除点击事件的类