Question

我正在开发一个响应式网站，我有一些标签可以在小屏幕上从标签变为手风琴。这就是我现在正在做的事情：

var myGlobalVariable = {};

$(window).resize(function(e) {
    duringResize();
    myGlobalVariable.windowWidth = window.innerWidth;
});

function widthHasChanged() {
    return window.innerWidth !== myGlobalVariable.windowWidth;
}

function duringResize() {
    if(widthHasChanged()) {
        if(Modernizr.mq('all and (min-width:1000px)')) {
            /* Do stuff for tabs */
        } else {
            /* Do stuff for accordion */
        }
    }
}

我对此并不满意，因为我必须使用全局变量来存储浏览器窗口的最后一个宽度，以便检查宽度是否已经改变。

我必须这样做的原因是因为在手机上，当标签处于手风琴模式时，单击一个实际上使文件更高以适应标签内容。出于某种原因，即使“窗口”在移动设备上的尺寸仍然相同，这也被归类为调整大小。这意味着我的标签/手风琴代码被调用，即使宽度没有改变，这也搞砸了。

我有什么遗漏或这是实现这一目标的唯一方法吗？欢迎jQuery和vanilla javascript解决方案。

Answer 1

没有特定的事件要绑定到窗口宽度更改。你的解决方案对我来说很好。

我能想到的唯一另一种方法是定时检查$（window）.width。我认为总的来说，单个全局变量更可取：）

在window.width调整大小但不调整高度时执行功能

1 个答案: