javascript - 特定のメディア クエリで jQuery ホバー イベントを防止する

Question

画面幅が 480px を超える場合はホバー イベントを使用し、幅が 480px 未満の場合はクリック/展開イベントを使用する基本的なメニュー/ナビゲーション システムを示す次の実例があります。

私のウェブサイト

画面サイズを 480px より小さくすると、目的の効果が得られず、ホバー イベントとクリック イベントの両方がトリガーされていることがわかります。

私はjQueryが初めてなので、これを防ぐ方法についての助けは素晴らしいでしょう!!!!

今までの私のコード:

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)')) {

            // Hide submenu
            $("#sub-menu").hide();

             // Reset margin for li tags if screen expanded whilst nav open
            $("#site-nav #nav-margin-down").css("margin-top","0");

            $("#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();
});