javascript - 使用 Modernizr 和 Zepto 时 window.resize 失败

Question

我在使用 JavaScript 和 Zepto 库调整元素大小时遇到​​问题。当页面加载时，元素获取窗口宽度和高度就好了。我还使用 alert() 测试了我的 window.resize 并且效果也很好。当我尝试在窗口更改大小时调整元素大小时，就会出现我的问题。这是我通过 Modernizr 加载的 JavaScript：

$(document).ready(function()
{
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);

    var navConfig = 
    {
        winWidth        : $(window).width(),
        winHeight       : $(window).height(),
        primaryNav      : $('#primaryNav'),
        openPrimaryNav  : $('#openPrimaryNav'),
        closePrimaryNav : $('#closePrimaryNav')
    }

    function sizePrimaryNavigation()
    {
        navConfig.primaryNav.css(
        {
            'height'    : navConfig.winHeight - 5,
            'width'     : navConfig.winWidth - 20
        });
    }

    function primaryNavigation()
    {   
        navConfig.openPrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.addClass('open');
        });

        navConfig.closePrimaryNav.bind('click', function()
        {
            navConfig.primaryNav.removeClass('open');
        }); 
    }

    sizePrimaryNavigation();

    primaryNavigation();

    window.onresize = sizePrimaryNavigation;
});

我还设置了一个工作演示 - http://jsfiddle.net/nicklansdell/DWbNS/2/单击演示上的菜单按钮以获取我要调整大小的元素。

谁能告诉我我做错了什么？提前谢谢了。

Answer 1

我检查了，这样写函数，它会工作。演示在这里

http://jsfiddle.net/DWbNS/7/

http://jsfiddle.net/DWbNS/9/

顺便说一句，zepto doc 说“绑定”是“已弃用，请改用”。

function sizePrimaryNavigation()
{
    navConfig.primaryNav.css(
    {
        'height'     : win.width() - 5,
        'width'        : win.height() - 20
    });

}
$(window).resize(sizePrimaryNavigation);
// window.onresize = sizePrimaryNavigation;
// will work too

Answer 2

您正在将该onresize属性分配给一个jQuery 对象( $(window))。您必须将其分配给window.onresize。