jQuery響應式移動菜單

Question

以下功能可以正常工作，但看起來不太干凈，可能有更好的方法來實現我所做的工作。 這是我想要做的：

1. 如果將視口調整大小（即使調整為1像素），則將刪除移動按鈕的樣式。 同樣，將刪除“活動”類。

2. 單擊時，將顯示“移動導航”元素，並向下滑動並添加“活動”類。

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

Answer 1

您要在相同事件（窗口大小調整和菜單按鈕單擊）上附加函數，最好在同一事件處理程序中調用這兩個函數，例如：

// 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/