Question

当浏览器的大小为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跟随内联列表？谢谢

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;
    }
});

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

1 个答案: