簡單，如果窗口大於不工作

我很努力與這個簡單的如果結構在響應式設計。基本上它是一個導航元素從下拉菜單切換到浮動列表。在960像素內調整大小時，下拉菜單不起作用。我目前的代碼有問題嗎？簡單，如果窗口大於不工作

$(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/

來源

2013-07-17 Mathijs Delva

你能把它放在小提琴上嗎？ –

當然，請參閱編輯！ –

將if（windowWidth <960）'改爲'if（$（window）.width（）<960）' - 您在運行時設置'windowWidth'變量，所以每次調用' checkSize（）' – ninty9notout

你需要把你的var windowWidth = $(window).width();功能checkSize()內。

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

否則windowWidth只拿到window.load一個值，而不是每次你要求的功能checkSize()。

來源

2013-07-17 10:21:27 putvande

這是正確的答案 - 我簡直就是把這張貼發佈爲問題的評論。 – ninty9notout

是的，這確實是朝着好的方向邁出的一步。現在的問題是，當我'激活'下拉/小於960 /和調整回960px以上時，我的#quicklinks ul消失了。 –

只有當較小的菜單（如果窗口寬度<500）被徘徊時纔會發生這種情況。因爲你在'＃quicklinks'中隱藏了'ul'（通過'slideUp（'fast'）'）。你的大菜單也是'ul'，這樣就可以隱藏起來。 – putvande

簡單，如果窗口大於不工作

回答

相關問題