javascript - 导航按钮单击更改样式效率

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