jQueryレスキューモバイルメニュー - jquery、hover、toggle、transition、fade

以下の機能は動作しますが、「きれいに見えません。おそらく私がやったことを達成するためのより良い方法があります。これが私がやろうとしていることです。

1. ビューポートのサイズが1pxでも変更されると、モバイルボタンのスタイルは削除されます。また、クラス「アクティブ」が削除されます。

2. クリックすると、「mobile-nav」要素が表示され、下にスライドして「アクティブ」クラスが追加されます。

3. 私はCSS3に依存しないようにしています。「ホバートランジションを機能させようとしています。 .menu-button それはスムーズに移行します .menu-button:hover スタイル。

http://jsfiddle.net/Sm5zy/11/

// Mobile Menu Button
$(window).resize(function () {
$(".menu-button").removeClass("active");
});

$(window).resize(function () {
$(".mobile-nav").removeAttr("style");
});

$(".menu-button").click(function () {
$(".menu-button").toggleClass("active");
});

$(".menu-button").click(function () {
$(".mobile-nav").slideToggle(250);
});

回答：

同じイベント（ウィンドウのサイズ変更とメニューボタンのクリック）で関数にアタッチしている場合、次のように同じイベントハンドラーで2つの関数を呼び出すことをお勧めします。

// Mobile Menu Button
$(window).resize(function () {
$(".menu-button").removeClass("active");
$(".mobile-nav").removeAttr("style");
});
$(".menu-button").click(function () {
$(".menu-button").toggleClass("active");
$(".mobile-nav").slideToggle(250);
});

ここでは、フィドルです： http://jsfiddle.net/IrvinDominin/Sm5zy/12/