当物理拖动以调整浏览器窗口大小时粘滞javascript

Question

我有一个在浏览器大小为n时展开下拉列表的函数。

大小n由CSS媒体查询确定，并按预期工作。

然而，当我物理拖动浏览器窗口出宽度，。点击功能保持结合到所述元件即使媒体查询指示CSS悬停效应发生时，浏览器是大小为n + 1。

刷新任何一点产生所需的行为，但我当然不想要刷新。

var section_4 = "#main-menu > li:nth-child(4) > a"; 
    var sub_section_4 = "#main-menu > li:nth-child(4) > ul"; 

    $(section_4).click(function() { 
     $(sub_section_4).slideToggle(300);   
     return false; 
    }); 

我该如何将这个函数只应用于给定的大小，而不是将.click放在内联列表中？感谢

Answer 1

您可以使用jQuery .width()和.resize()这样的：

var section_4 = "#main-menu > li:nth-child(4) > a"; 
var sub_section_4 = "#main-menu > li:nth-child(4) > ul"; 

var docWidth = (window).width(); 
$(document).resize(function(){ 
    docWidth = (window).width(); // Refresh value on resize 
}); 

$(section_4).click(function() { 
    if(docWidth < [integer]){  // set integrer the same as your @media. 
     $(sub_section_4).slideToggle(300); 
     return false; 
    } 
});