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

Question

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

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

然而，当我物理地将浏览器的宽度 window 拖出时，.click 函数仍然绑定到元素，即使媒体查询指示 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() and .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;
    }
});

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

Sticky javascript when physically dragging to resize browser window

html

javascript

css

jquery

media-queries