Javascript jQuery下拉菜单在调整页面大小后导致无限循环

我试图为一个网站创建一个导航菜单，它是一个大屏幕宽度上的普通水平导航栏，但当窗口宽度低于980px时，它会变成jQuery下拉菜单

如果初始页面加载发生在窗口小于980px的情况下，则菜单按预期工作。但是，如果窗口的大小完全调整，移动菜单会在最终完全打开之前打开和关闭多次

该网站是-如果您在桌面计算机上全屏加载，将窗口调整为小宽度，然后单击右上角的绿色按钮，您将看到菜单的行为

我的代码如下：

 jQuery(document).ready(function($) {
      if($(window).width() < 980) {
        $("#mmenu").hide();
        $(".mtoggle").click(function() {
          $("#mmenu").slideToggle(500);
        });
      }
    });


    // check for window resize - show nav again for larger screens after hiding
    $(window).resize(function() {
     if($(window).width() < 980) {
        $("#mmenu").hide();
        $(".mtoggle").click(function() {
          $("#mmenu").slideToggle(500);
        });
      }
      if ($(window).width() > 980) {
                $('#mmenu').show();
            }
    });

jQuery（文档）.ready（函数（$）{
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
$（“.mtoggle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
}
});
//检查窗口大小-隐藏后再次显示较大屏幕的导航
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
$（“.mtoggle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
}
如果（$（窗口）.width（）>980）{
$（'#mmenu'）.show（）；
}
});

我是一个非常熟悉jQuery的初学者，并且假设我在代码的第二部分中所做的事情是以某种方式创建一个循环，但是我不知道为什么或者我能做些什么来纠正它——我已经尝试将声明更改为if/else格式，但这没有什么区别。我也不明白为什么，如果一个偶然的循环正在发生，行为会在几次打开和关闭后停止，而不是无限地继续

---

任何帮助都将不胜感激

无限循环是因为您正在绑定

$（“.mtoggle”）。请在代码中的以下位置单击（函数（）

两次

• if（$（window）.width（）<980）{1

• $（窗口）。调整大小（函数（）{

当您重新调整

click

大小时，会多次触发事件，导致无限循环

因此，请绑定此代码

$（“.mtoggle”）。在
jQuery（文档）中单击（函数（）
一次。就绪（函数（$）{

js

 jQuery(document).ready(function ($) {
     $(".mtoggle").click(function () {
         $("#mmenu").slideToggle(500);
     });
     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
 });

 $(window).resize(function () {
     if ($(window).width() < 980) {
         $("#mmenu").hide();
     }
     if ($(window).width() > 980) {
         $('#mmenu').show();
     }
 });

jQuery（文档）.ready（函数（$）{
$（“.mtogle”）。单击（函数（）{
$（“#mmenu”）。滑动切换（500）；
});
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
}
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<980）{
$（“#mmenu”）.hide（）；
}
如果（$（窗口）.width（）>980）{
$（'#mmenu'）.show（）；
}
});

当您调整窗口大小时，resize事件会触发很多次，这也会一次又一次地绑定click事件

当你点击按钮时，它会同时触发所有绑定来做同样的事情，然后砰的一声！你就有了你的crasy滑动菜单

问题的解决方案是在resize事件（documentready）之外创建click绑定，并在click内测试窗口宽度

比如：

$(document).ready(function () {
    $(".mtoggle").click(function () {
        //Test inside the click
        if ($(window).width() <= 980)
        {
            $("#mmenu").slideToggle(500);
        }
    });
    if ($(window).width() <= 980) {
        $("#mmenu").hide();
    }
});

$(window).resize(function () {
    if ($(window).width() <= 980) {
       $("#mmenu").hide();
    }
    if ($(window).width() > 980) {
       $('#mmenu').show();
    }
});

$（文档）.ready（函数（）{
$（“.mtogle”）。单击（函数（）{
//在单击中进行测试
如果（$（window）.width（）那么，这不是无限循环，只是循环次数太多了

复制
单击
事件，因此任何
调整大小
操作都会再次添加
滑动切换
调用

您可以通过单击浏览器的
最大化
按钮和
滑动切换
循环一次来证明这一点，但是如果您通过拖动浏览器边缘来调整窗口大小，会出现许多循环，而不是无限循环，您将看到是否足够耐心。因为在拖动浏览器边缘时，任何像素都会触发
调整大小
事件。
因此，从
1080px的宽度
到
980px的宽度
，将有99个以上的
slideToggle
调用