1

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

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

该网站是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 格式，但这没有区别。我也不明白为什么，如果发生意外循环，行为会在几次打开和关闭后停止，而不是无限继续。

任何帮助将非常感激！

4

3 回答 3

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();
     }
 });
于 2013-08-22T01:56:27.350 回答
1

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

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

您的问题的解决方案是在调整大小事件（documentready）之外创建点击绑定，并在点击内测试窗口宽度。

就像是：

$(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();
    }
});
于 2013-08-22T02:15:20.180 回答
1

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

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

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

于 2013-08-22T02:31:06.497 回答