活動課無法正常工作

Question

我有一些菜單項，菜單中有一個加號（+）。當我點擊加號時，它應該添加一個類，看起來像十字。它正在發生，但是當我點擊十字標誌時，它不會刪除標誌，以便我可以再次獲得加號。

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

}); 

這裏是Example。

Answer 1

問題是因爲您總是刪除，然後立即將該類重新添加到單擊的元素上。爲了解決這個問題排除使用not()的removeClass()調用當前元素，然後用toggleClass()添加/刪除類的必需的元素，像這樣：

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

Updated fiddle

Answer 2

這是因爲你的代碼被刪除和每次點擊事件觸發器時添加相同的類。嘗試這樣的事情

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

Answer 3

我已經有點各地對這裏的房子，但這個工程使用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 4

您總是在您的點擊處理程序的最後一行中添加類addplus。而不是嘗試以下操作：

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