jQuery 响应式移动菜单

Question

以下功能有效，但看起来不干净，可能有更好的方法来实现我所做的。这是我想要做的：

1. 如果调整视口大小，即使调整了 1 像素，移动按钮的样式也会被移除。此外，“active”类也被删除了。

2. 点击后会显示“mobile-nav”元素并向下滑动并添加“活动”类。

3. 我尽量不依赖 CSS3，我正在尝试让 a :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/