導航按鈕點擊更改樣式效率

Question

我目前的代碼太亂了。你能否幫助提高效率？

function buttons(){ 
    $('.notclicked').click(function(){ 
     $('.leftmenu').addClass('leftclicked'); 
     $('.mainwrap').addClass('mainclicked'); 
     $(this).removeClass('notclicked'); 
     $(this).addClass('clicked'); 
     $('.clicked').click(function(){ 
      $('.leftmenu').removeClass('leftclicked'); 
      $('.mainwrap').removeClass('mainclicked'); 
      $(this).removeClass('clicked'); 
      $(this).addClass('notclicked'); 
      buttons(); 
     }); 
     buttons(); 
    }); 
}; 
buttons(); 

如此處所示。 （http://quinnkeaveney.com/recondite/brian/index.php）

Answer 1

您可以使用

$(document).on('click', selector, function() { 
    // your function 
} 

的點擊綁定到可能尚未加載選擇。

Answer 2

$('#menu').click(function(){ 
    var btn = $(this); 
    // find out if it has the notclicked class 
    var notClicked = btn.hasClass('notclicked'); 
    // when notClicked is true, toggleClass acts like addClass 
    // when notClicked is false, toggleClass acts like removeClass 
    $('.leftmenu').toggleClass('leftclicked', notClicked); 
    $('.mainwrap').toggleClass('mainclicked', notClicked); 
    // This will toggle these both back and forth 
    btn.toggleClass('notclicked clicked'); 
});