活动课程无法正常工作

Question

我有一些菜单项，并且在菜单中有加号（+）。 当我单击加号时，它应该添加一个类，看起来像十字。 它正在发生，但是当我单击十字符号时，它不会删除该符号，因此我可以再次获得加号。

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

});

这是示例 。

Answer 1

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

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

更新的小提琴

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

这是因为每次click事件触发时，您的代码都将删除并添加相同的类。 试试这个

$(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');
    }
  });
});