Question

我有一些菜单项，在菜单中我有一个加号（+）。当我点击加号时，它应该添加一个类，看起来像十字架。它正在发生但是当我点击十字标志时它没有移除标志，这样我就可以再次获得加号。

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

});

这是Example。

Answer 1

问题是因为你总是删除，然后立即在被点击的元素上添加类。要解决此问题，请使用removeClass()从not()调用中排除当前元素，然后使用toggleClass()将类添加/删除到所需元素，如下所示：

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

Updated fiddle

Answer 2

我已经对这里的房子有所了解，但这可以使用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/

Answer 3

这是因为您的代码每次单击事件触发时都会删除并添加相同的类。试试这样的事情

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

Answer 4

您始终在点击处理程序的最后一行添加类addplus。请尝试以下方法：

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

活动类无法正常工作

4 个答案: