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

我有一个jQuery函数，我只想在窗口小于768px时使用它。（这是针对响应速度快的网站，所以我不能只针对移动设备）

我有一些代码，只在屏幕大小小于768px时检查应用的特定css样式。然后，当用户单击另一项时，它隐藏菜单并切换菜单。（#主菜单）

我有以下代码：

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有媒体查询

---

（顺便说一句，我也试过查看窗口宽度，但不够精确）

将CSS mediaqueries放在一边（但我在这里看到了您的想法），可以将代码放在if语句中。就你而言：

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

if（$（window）.width（）<768）{….}

这看起来像：

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

函数checkSize（）{
如果（$（窗口）.width（）<768）{
$（'.menu主菜单容器'）。滑动切换（）；
}否则{
$（'.menu主菜单容器'）.slideDown（）；
}   
}

如果您的连接点出现在移动设备和其他设备之间，为什么要嗅探分辨率而不是移动设备？另外，不确定为什么-1我认为这是一个完全可以接受的问题。

resize（）

在窗口调整大小时触发，而不是“调整大小”。您可以通过一个

去盎司
来实现这一点，当用户停止调整大小时，该去盎司会触发，但在某些情况下，您仍然会遇到相同的问题。由于window.width可能不够精确，请检查此项：