jquery - jQuery レスポンシブ モバイル メニュー

Question

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

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

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

3. 私は CSS3 に依存しないようにしています。aa :hover トランジションを機能させようとしています。そのため、カーソルを合わせると、スタイル.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);
});