绑定函数到自定义条件

Question

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

我想添加一个div到我的页面（特别是菜单），但只有当页面小于一定的宽度。基本上我需要一个事件处理程序，它允许我等待该条件得到满足并且一旦运行它就会运行一个函数（类似于你将如何处理（“点击”）），但我不知道如何实现这一点。

任何帮助将不胜感激！

Answer 1

看看下面的代码：

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

我们重点监测的窗口大小调整事件，并追加/删除DIV按你的条件。

Live Example

玩的小提琴（结果窗格）的底部右侧，并调整其大小，看看会发生什么。

Answer 2

这是没有的事件处理程序，但你可以在resize事件处理程序添加它：

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