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"
        });
    };
});

Answer 2

if ($(window).width() > 100 && $(window).width() < 200) {
    $('#myDeepMenu').deepMenu({
        "tileW": 64,
        "tileH": 100,
        "columns": 2,
        "rows": 2,
        "mark-type": "top-left",
        "mark-color": "#A1A1A1"
    });
};  <----------------------- Semicolon in error?

让我的JS响应？

2 个答案: