javascript - 让我的 JS 响应式？

Question

原代码如下:

$(document).ready(function () {
    $('#myDeepMenu').deepMenu({
        "tileW": 64,
        "tileH": 100,
        "columns": 2,
        "rows": 2,
        "mark-type": "top-left",
        "mark-color": "#A1A1A1"
    });
});

我试图使此代码响应，以便列和行值根据屏幕尺寸而变化。为此我已经实现了这一点。

$(document).ready(function () {
    if ($(window).width() > 100 && $(window).width() < 200) {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 2,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
    else {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 3,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };

});

我关注的值是“列”和“行”部分。由于某种原因，添加最小-最大宽度条件会使该函数完全关闭。

我将如何根据屏幕尺寸更改此函数的值？

Answer 1

您需要一个函数来在尺寸更改时获取新尺寸:

var h = $(window).height(), w = $(window).width();
$(window).resize(function(){

   var nh = $(window).height(), nw = $(window).width();
   h = nh; w = nw;
   if nw > 100 && nw < 200) {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 2,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
    else {
        $('#myDeepMenu').deepMenu({
            "tileW": 64,
            "tileH": 100,
            "columns": 3,
            "rows": 2,
            "mark-type": "top-left",
            "mark-color": "#A1A1A1"
        });
    };
});