jquery - jQuery 响应式移动菜单

Question

以下功能有效，但看起来并不干净，可能有更好的方法来实现我所做的。这是我正在尝试做的事情：

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

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

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/