在特定媒体查询中防止jQuery悬停事件

Question

I've the following working example showing a basic menu/nav system that uses at hover event for screen widths greater than 480px and and click/expand event for widths less than 480px:

my website

If you reduce the screen size down from greater than 480px you'll see I'm not getting the desired effect, both the hover and click events are being triggered.

I'm new to jQuery so any help on how to prevent this would be great!!!!

My code up to now:

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

Answer 1

This seems to of fixed the problem, but is no doubt more of a hack:

var next_move = "show";

$(document).ready(function () {

  // Touch device fix to prevent submenu being shown during initial load
  $('#sub-menu').css("display","block");

    $("#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)')) {

      // Fixes issue on touch device when you touch away from expanded submenu...this took forever!!!
      $('#sub-menu').slideUp(100);
      $("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);

      // To make sure if nav expanded, so next_move ="hide", hover event doesn't hide() submenu
      if (!Modernizr.touch) {
        $("#show-investment-type-nav").hover(function() {
          $("#sub-menu").hide();
          if (next_move === "hide") {
            $("#sub-menu").show();
          }
        });
      }

      next_move = "show";
    }
  }

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

  doneResizing();
});