活动课无法正常工作

我有一些菜单项，菜单中有一个加号（+）。当我点击加号时，它应该添加一个类，看起来像十字。它正在发生，但是当我点击十字标志时，它不会删除标志，以便我可以再次获得加号。活动课无法正常工作

$(document).ready(function(){  
    $('.nav-link').click(function(){ 
    $('.nav-link').removeClass('addplus'); 
    $(this).addClass('addplus'); 
    }); 

});

这里是Example。

来源

2017-10-11 mr.tanmay

问题是因为您总是删除，然后立即将该类重新添加到单击的元素上。为了解决这个问题排除使用not()的removeClass()调用当前元素，然后用toggleClass()添加/删除类的必需的元素，像这样：

$('.nav-link').click(function() { 
    $('.nav-link').not(this).removeClass('addplus'); 
    $(this).toggleClass('addplus'); 
});

Updated fiddle

来源

2017-10-11 15:52:53

太感谢你了:) –

这比我提供的一个更好的和更简洁的方法。尼斯。 –

@ mr.tanmay没问题，很高兴帮助 –

这是因为你的代码被删除和每次点击事件触发器时添加相同的类。尝试这样的事情

$(document).ready(function(){  
    $('.nav-link').click(function(){ 
    $(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY 
    }); 
});

来源

2017-10-11 15:55:22 Himan

你说的部分错误。因为当我点击第一个菜单时它很好，当我点击第二个菜单时它也这样做，但它不会删除第一个菜单的标志 –

我已经有点各地对这里的房子，但这个工程使用parent和siblings：

$('.nav-link').click(function() { 
    $(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus'); 
    $(this).toggleClass('addplus'); 
});

我不会在所有匹配的元素做一条毯子removeClass像你所做的那样，我会通过排除当前匹配的元素来挑选它们。修正小提琴：https://jsfiddle.net/epqxb6L7/5/

来源

2017-10-11 15:57:33

是的，这也是正确的，谢谢.. –

您总是在您的点击处理程序的最后一行中添加类addplus。而不是尝试以下操作：

$(document).ready(function(){  
    $('.nav-link').click(function(){ 
    if ($(this).hasClass('addplus')) { 
     $(this).removeClass('addplus'); 
    } else { 
     $(this).addClass('addplus'); 
    } 
    }); 
});

来源

2017-10-11 16:02:24

活动课无法正常工作

回答

相关问题