Question

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

我正在尝试将div添加到我的页面（具体到菜单），但仅限于页面小于某个宽度。基本上我需要一个事件处理程序，它允许我等待满足该条件并运行一个函数（类似于你将如何处理。（＆＃34;点击＆＃34;））但我不知道如何做到这一点。

非常感谢任何帮助！

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 
 }

将功能绑定到自定义条件

2 个答案: