1

大きな画面幅では通常の水平ナビゲーション バーである Web サイトのナビゲーション メニューを作成しようとしましたが、ウィンドウ幅が 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 の初心者であり、コードの 2 番目のセクションで行ったことが何らかの形でループを作成していると想定していますが、それを修正するために何ができるか、またはその理由がわかりません - 宣言を次のように変更しようとしましたif/else 形式ですが、これは違いはありません。また、偶発的なループが発生している場合、無限に続くのではなく、数回開いて閉じた後に動作が停止する理由もわかりません。

どんな助けでも大歓迎です！

4

3 に答える 3

1

無限ループは$(".mtoggle").click(function ()、次の場所でコード内の 2 回をバインドしているためです。

  • 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

ウィンドウのサイズを変更している間、サイズ変更イベントが何度もトリガーされ、クリック イベントも何度もバインドされます。

ボタンをクリックすると、すべてのバインディングが同時にトリガーされ、同じことが行われ、ブーム! あなたはクレイジーな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 に答える