Question

在响应式设计中，我正在努力应对这种简单的if结构。基本上它是一个nav元素从下拉列表切换到浮点列表。在960px内调整大小时，下拉列表不起作用。我目前的代码有问题吗？

$(window).load(function(){
var windowWidth = $(window).width();
function checkSize() {
    if(windowWidth < 960) {
        quickDrop();
    }
}
function quickDrop(){
    $("#quicklinks").hover(function() {
        $("#quicklinks > ul").stop(true,true).slideDown("fast");
        $sitesArrow.css({ WebkitTransform: 'rotate(270deg)'});
        $sitesArrow.css({ '-moz-transform': 'rotate(270deg)'});
    }, function(){
        $("#quicklinks > ul").stop(true,true).slideUp("fast");
        $sitesArrow.css({ WebkitTransform: 'rotate(0deg)'});
        $sitesArrow.css({ '-moz-transform': 'rotate(0deg)'});
    });
}
checkSize();

$(window).resize(function(){
    checkSize();
});
});

谢谢！

http://jsfiddle.net/bdGPz/

Answer 1

您需要将var windowWidth = $(window).width();放在checkSize()函数中。

function checkSize() {
    var windowWidth = $(window).width();
    if(windowWidth < 960) {
        quickDrop();
    }
}

否则windowWidth只会在window.load上获取值，而不是每次请求函数checkSize()时都会得到。

如果窗口大于不工作，则很简单

1 个答案: