物理拖动以调整浏览器窗口大小时的粘性 JavaScript

Sticky javascript when physically dragging to resize browser window

本文关键字：小时 JavaScript 窗口 拖动 调整 浏览器      更新时间：2023-09-26

>我有一个函数，当浏览器大小为 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跟随到内联列表？

谢谢
你可以

使用 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;
    }
});
相关文章：