0

私はjQueryを初めて使用し、480pxを超える画面幅ではliタグのマウスをホバーしてサブメニューを展開し、480px未満の幅ではliタグをクリックして展開する基本的なメニューシステムをコーディングしようとしましたサブメニュー。

メディア クエリを検出する Modernizr の機能の使用を含めようとしましたが、私の試みからわかるように、惨めに失敗します。

作業例。.....「Properties」という名前の li タグにカーソルを合わせます。

この問題は明らかに、ブラウザーを正しい幅で更新すると 480px を超えて 480px 未満で動作するため、コードが画面のサイズ変更を検出しないことに関係していますが、ブラウザーのサイズを変更すると、関数は引き続きトリガーされます!!

私のコード:

// Main nav dropdown animation

$(document).ready(function() {
  function doneResizing() {
    if(Modernizr.mq('screen and (min-width: 481px)')) {

        $("#sub-menu").hide();

        $("#show-investment-type-nav").hover(function() {
            $(this).find("#sub-menu").stop(true, true).slideDown("fast");
        }, function() {
            $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
        });

    }
    else if(Modernizr.mq('screen and (max-width: 480px)')) {

      $("#sub-menu").hide();

      var next_move = "show";

        $("#show-investment-type-nav").click(function() {

            $('#sub-menu').slideToggle(100);

            if (next_move === "show") {
                $("body").addClass("nav-active");
                $("#site-nav #icon").empty().html("");
                $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100);
                next_move = "hide";
            } else {
                $("body").removeClass("nav-active");
                $("#site-nav #icon").empty().html("");
                $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);
                next_move = "show";
            }
        });
    }
  }

  var id;
  $(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
  });

  doneResizing();
});

なぜこれが起こっているのかについての助けは素晴らしいでしょう、それは私が学ぶのを助けるでしょう!!

乾杯！

4

2 に答える 2

0

これを試してみて、動作するかどうかを確認してください。クリック ハンドラーをサイズ変更ハンドラーの外に移動しました。イベントにイベントをバインドするのは難しく、通常は必要ありません。next_moveまた、グローバルスコープに入れるために移動する必要がありました。を使用してメニュー要素に値を追加するdata()ことは、より良いオプションかもしれません:

var next_move = "show";

$(document).ready(function () {

    $("#show-investment-type-nav").click(function () {
        if (Modernizr.mq('screen and (max-width: 480px)')) {
            $('#sub-menu').slideToggle(100);
            if (next_move === "show") {
                $("body").addClass("nav-active");
                $("#site-nav #icon").empty().html("");
                $("#site-nav #nav-margin-down").animate({
                    "margin-top": "163"
                }, 100);
                next_move = "hide";
            } else {
                $("body").removeClass("nav-active");
                $("#site-nav #icon").empty().html("");
                $("#site-nav #nav-margin-down").animate({
                    "margin-top": "0"
                }, 100);
                next_move = "show";
            }
        }
    });

    function doneResizing() {
        if (Modernizr.mq('screen and (min-width: 481px)')) {
            $("#sub-menu").hide();
            $("#show-investment-type-nav").hover(function () {
                $(this).find("#sub-menu").stop(true, true).slideDown("fast");
            }, function () {
                $(this).find("#sub-menu").stop(true, true).fadeOut("fast");
            });
        } else if (Modernizr.mq('screen and (max-width: 480px)')) {
            $("#sub-menu").hide();  
            next_move = "show";
        }
    }

    var id;
    $(window).resize(function () {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});
于 2013-09-23T14:54:49.773 に答える