jQuery切換div和切換類

我有一個側面導航，用戶可以點擊一個鏈接，然後用該選項切換面板。我現在的問題是我需要能夠刪除類，當用戶點擊相同的鏈接來隱藏面板。jQuery切換div和切換類

現在「活動」狀態在鏈接上左移。當你從一個鏈接點擊到另一個鏈接時，它可以正常工作，但如果有人希望隱藏菜單，也可以刪除「活動」狀態。菜單上的青色高亮顯示「活動」類。

的jsfiddle：http://jsfiddle.net/visualdecree/4A23Z/11/

的jQuery：

$(".sn a").on('click',function(){ 

    var panID = $("#" + $(this).data('panel')); 

    $("div[id*='sn-pan-']") 
    .stop() 
    .hide({slide:'toggle'}, 400); 

    $(panID) 
    .css({'left' : '100px','overflow':'visible'}) 
    .stop() 
    .animate({width:'toggle'}, 400) 
}); 

$('.sn').click(function(){ 
    $('ul.sidenav li').removeClass('active');      
    $(this).stop(true,true).addClass("active"); 
});

來源

2012-09-06 Doidgey

您可以排除從removeClass功能點擊的項目，並切換它，而不是像這樣

從的jsfiddle改變如下所述。

$('.sn').click(function(e) { 
    $('ul.sidenav li').not(this).removeClass('active'); 
    $(this).stop(true, true).toggleClass("active"); 
});

來源

2012-09-06 09:22:54 Ties

http://jsfiddle.net/4A23Z/16/ – undefined

感謝fid dle :) – Ties

與hasClass一起檢查很不錯，很好。 – Asciiom

您可以檢查如果鏈接活動類和只添加這個類，如果它是尚未激活：

$('.sn').click(function(){ 
    var isActive $(this).hasClass('active'); 
    $('ul.sidenav li').removeClass('active'); 

    $(this).stop(true,true); 
    if(!isActive){ 
     $(this).addClass("active"); 
    } 
});

working fiddle

來源

2012-09-06 09:24:30 Asciiom

謝謝Jeroen，我會接受上述爲正確的，因爲它的代碼和整潔度較低，但是非常感謝 – Doidgey

你是正確:)歡迎！ – Asciiom

或者只需撥動活動類

$('.sn').click(function(){ 
    $(this).toggleClass("active"); 
});

來源

2012-09-06 09:34:11 BIOS

jQuery切換div和切換類

回答

相關問題