将函数绑定到自定义条件

Question

注意：我很少使用JS和jQuery所以如果问题很奇怪，请原谅。

我正在尝试将 div 添加到我的页面（具体到菜单），但前提是页面小于特定宽度。基本上我需要一个事件处理程序，它允许我等待满足该条件并运行一个函数（类似于你对 on.("click") 的处理方式）但我不知道如何完成那。

如有任何帮助，我们将不胜感激！

Answer 1

看看下面的代码：

var $myDiv = $("<div class='myDiv'></div>");
$(window).resize(function () {
    var windowWidth = $(this).width();
    if (windowWidth < 200) {
        $("body").append($myDiv);
    } else {
        $myDiv.remove();
    }
});

我们监控 window 调整大小事件，并根据您的情况 append/remove div。

Live Example

在 fiddle（结果面板）的右下角试一试，调整它的大小看看会发生什么。

Answer 2

这没有事件处理程序，但您可以将其添加到调整大小事件处理程序中：

if (window.matchMedia("(min-width:700px)").matches) {
 // viewport width is at least 700px
 } else {
 // viewport is smaller than 700px 
 }

将函数绑定到自定义条件

Bind function to custom condition

javascript

jquery

width