防止在菜单/导航系统的特定屏幕宽度下触发 jQuery 函数

Prevent triggering jQuery functions at specific screen widths for menu/nav system

本文关键字：屏幕 函数 jQuery 菜单 导航 系统      更新时间：2023-09-26

我是使用 jQuery 的新手，并尝试编写一个基本的菜单系统，该系统在屏幕宽度大于 480px 时通过悬停 li 标签的鼠标展开子菜单来工作，在宽度小于 480px 时通过单击 li 标签展开子菜单。

我试图包括使用 Modernizr 检测媒体查询的功能，但是正如您将从我的尝试中看到的那样，它惨遭失败：

工作实例...将鼠标悬停在名为"属性"的 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("&#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";
            }
        });
    }
  }
  var id;
  $(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
  });
  doneResizing();
});

任何关于为什么会发生这种情况的帮助都会很棒，它会帮助我学习！！

干杯伙计们！

试一试，看看它是否有效。我将单击处理程序移出了调整大小处理程序。在事件中绑定事件很棘手，通常不是必需的。我还必须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("&#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)')) {
            $("#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();
});

这似乎解决了这个问题，但可能更像是一个黑客而不是修复！！

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();
});
相关文章：