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

【问题标题】：Sticky javascript when physically dragging to resize browser window物理拖动以调整浏览器窗口大小时的粘滞javascript
【发布时间】：2016-07-17 02:51:27
【问题描述】：

我有一个功能可以在浏览器大小为 n 时展开下拉列表。

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

但是，当我物理地将浏览器窗口的宽度拖出时，.click 函数仍然绑定到元素，即使媒体查询表明当浏览器大小为 n + 1 时会发生 css 悬停效果。

在任何时候刷新都会产生所需的行为，但我当然不想要求刷新。

   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 跟随内联列表？谢谢

【问题讨论】：

您可以在 window.onresize 事件上设置一个处理程序，如果 window.innerWidth = n 做一些事情。

标签： javascript jquery html css media-queries

【解决方案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;
    }
});

【讨论】：