Question

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

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

网站为http://host26.qnop.net/~fpsl/ - 如果您在桌面计算机上全屏加载，请将窗口调整为较小的宽度，然后点击右上角的绿色按钮，您会看到菜单的行为

我的代码如下：

 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初学者并假设我在代码的第二部分中所做的事情是以某种方式创建循环，但我不知道为什么或我可以做些什么来纠正它 - 我试过改变声明为if / else格式，但这没有区别。我也不明白为什么，如果发生意外循环，行为会在几次打开和关闭后停止，而不是无限延续。

非常感谢任何帮助！

Answer 1

无限循环是因为您在以下位置的代码中绑定$(".mtoggle").click(function ()两次

if ($(window).width() < 980) {1
$(window).resize(function () {

当你重新调整大小click事件被多次触发时会导致无限循环。

所以在$(".mtoggle").click(function ()

中绑定此代码jQuery(document).ready(function ($) {一次

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

Answer 2

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

当您单击按钮时，它会同时触发所有绑定以执行相同的操作和Boom！你有你的crasy SlidingMenu

您的问题的解决方案是在resize事件（documentready）之外创建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();
    }
});

Answer 3

嗯，这不是无限循环，只是循环太多次。

您复制了click个事件，因此任何resize操作都会再次添加slideToggle个调用。

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

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

3 个答案: