防止jQuery懸停事件在特定的媒體查詢

我有下面的工作示例顯示基本的菜單/導航系統使用懸停事件的屏幕寬度大於480px，並單擊/展開事件的寬度小於480px：防止jQuery懸停事件在特定的媒體查詢

如果您將屏幕尺寸從大於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("&#59236;"); 
       $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100); 
       next_move = "hide"; 
      } else { 
       $("body").removeClass("nav-active"); 
       $("#site-nav #icon").empty().html("&#59238;"); 
       $("#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(); 
});

來源

2013-09-23 Sam Holguin

你只有一次結合的情況下，從來沒有當它不再匹配if條件時解除綁定。因此，一旦受到約束，它永遠不會解除約束。 –

@KevinB感謝您的意見，正如我所說，我對這一切都相當陌生，您能否解釋一下，請進一步？ –

這似乎是固定的問題，但毫無疑問，更多的是黑客：

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("&#59236;"); 
      $("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100); 
      next_move = "hide"; 
     } else { 
      $("body").removeClass("nav-active"); 
      $("#site-nav #icon").empty().html("&#59238;"); 
      $("#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(); 
});

來源

2013-09-23 16:52:06

防止jQuery懸停事件在特定的媒體查詢

回答

相關問題