Question

我有一个jQuery函数，当窗口小于768px时我只想工作。（这是一个响应式网站，所以我不能只为移动设备做这件事）

我有一些代码可以检查仅在屏幕大小小于768px时才应用的特定css样式。然后它隐藏菜单并在用户点击另一个项目时切换菜单。（#mainMenu）

我有以下代码：

function checkSize(){
    if ($('#mainLogo').css('float') == 'none') {
        $('.menu-main-menu-container').slideToggle();   
        } else {
        $('.menu-main-menu-container').slideDown();
    }   
}

$('#mainMenu').click(function() {
       checkSize();
});

此代码非常有效，除非用户在桌面上并且屏幕小于768px时，切换菜单关闭，然后将屏幕拖得更宽。它保持主菜单隐藏。

我尝试添加这个：

$(window).resize(checkSize);

但是现在当我调整屏幕尺寸时，无论是更小还是更宽，它都会将菜单切换大约5次。

有没有办法解决这个问题？或者也许是一种更好的方法来检查屏幕的宽度，以便仅在屏幕小于768px时才会发生切换？我希望有jQuery的媒体查询！

（ps我也试过看窗口宽度，但不够准确）

Answer 1

将CSS-mediaqueries方式放在一边（但我在这里看到你的想法）可以将你的代码放在if语句中。在你的情况下：

if( $(window).width() < 768 ) {  .... }

看起来像：

function checkSize(){
   if( $(window).width() < 768 ) {
        $('.menu-main-menu-container').slideToggle();   
   } else {
        $('.menu-main-menu-container').slideDown();
   }   
}

jQuery检查窗口大小调整触发器切换次数太多

1 个答案: