jQuery 响应式移动菜单

Posted 2023-05-08

【中文标题】jQuery 响应式移动菜单

【英文标题】：jQuery Responsive Mobile Menu

【发布时间】：2013-06-04 21:36:29

【问题描述】：

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

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

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

我尽量不依赖 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);
);

【问题讨论】：

您在同一事件中附加到函数，我认为这可以更好jsfiddle.net/IrvinDominin/Sm5zy/12

这正是我正在寻找的清理工作:) 谢谢！

好！如果您正在寻找的答案考虑接受它：***.com/help/accepted-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/

【讨论】：

感谢爱德华的帮助 :)