リファクタリングこのjQueryの（それが肥大化したようだ）

Question

私はこのコードは動作しますが、肥大化した感じ、私はそれを行うための迅速な方法を確認してくださいtheresのだ、jQueryのを使用して、この非常に単純なタスクを実行しています：

メニューと近いですデフォルトでは隠されています。

$(document).ready(function(){ 
var menu = $('#menu'); 
var open = $('.btnOpen'); 
var close = $('.btnClose'); 

open.click(function(){ 
    menu.show(); 
    open.hide(); 
    close.show(); 
}); 

close.click(function(){ 
    menu.hide(); 
    close.hide(); 
    open.show(); 
}); 

}）;

Answer 1

試してみてください。

$(document).ready(function(){ 
    $('.btnOpen, .btnClose').click(function(){ 
     $('#menu, .btnOpen, .btnClose').toggle(); 
    }); 
}); 

Answer 2

あなたはグループ要素次のことができます。あなたもmenu.add(close)前もってへの参照を格納することができ

open.add(close).click(function(){ 
    var show = $(this).hasClass('btnOpen'); 
    menu.add(close).toggle(show); 
    open.toggle(!show); 
}); 

：

open.click(function(){ 
    menu.add(close).show(); 
    open.hide(); 
}); 

close.click(function(){ 
    menu.add(this).hide(); 
    open.show(); 
}); 

それともも可能（と短いが、それでも信頼性を）。

同期外れしないように、ちょうどtoggleを使用しないでください。可視性がこれらのボタン以外のものでは変更できないことが非常に確かな場合のみです。そして、もし速く/繰り返しクリックしても、これはうまくいきません。

Answer 3

$('.btnOpen, .btnClose').click(function(){ 
    $('.btnOpen, .btnClose, #menu').toggle(); 
}); 

はCSSを通じて適切に初期状態を設定してください。

Answer 4

...のは、ここでいくつかのより多くのアイデアを投げてみましょう:)

$(document).ready(function(){ 
    var $buttons = $('.btnOpen,.btnClose'); 

    $buttons.click(function(){ 
     $buttons.add('#menu').toggle(); 
    }); 
});