使用 matchMedia 为低于 1025px 的菜单禁用 jQuery 悬停效果

Question

我运行一个带有自定义标头的 WordPress 网站。因此，我决定依赖jQuery。

我有一个菜单 (#sitenavigation)，当我将鼠标悬停在它所在的容器 (#menuhover) 上时会出现该菜单 (#sitenavigation)。我只希望它在使用 matchMedia 的 1025 像素和更宽的视口中工作。在比那个小的视口中，出现的按钮（#close-navgation-mobile 和#open-navigation-mobile）成功地打开和关闭了这个菜单。

我遇到的问题是在小于 1025 像素的视口中成功禁用了 mouseenter/mouseleave 功能。我怎样才能编辑这段代码来完成这个？

$(document).ready(function () {
  if (window.matchMedia("(min-width: 1025px)").matches) {
    $("#menuhover").mouseenter(function () {
      $("#site-navigation").stop(true, false);
      $("#site-navigation").animate({ left: "-2rem", opacity: "1" }, 300);
    });
    $("#menuhover").mouseleave(function () {
      $("#site-navigation").stop(true, false);
      $("#site-navigation").css({ left: "-480px", opacity: "0" });
    });
  } else {
    $("#menuhover").mouseenter(function (event) {
      event.preventDefault();
    });
    $("#menuhover").mouseleave(function (event) {
      event.preventDefault();
    });
  }

  $("#open-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-1rem", opacity: "1" }, 250);
    $("#close-navigation-mobile").css({ display: "flex" });
    $("#open-navigation-mobile").css({ display: "none" });
  });
  $("#close-navigation-mobile").on("click", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
  $(window).on("beforeunload", function () {
    $("#site-navigation").animate({ left: "-100vw", opacity: "0" }, 250);
    $("#close-navigation-mobile").css({ display: "none" });
    $("#open-navigation-mobile").css({ display: "flex" });
  });
});

我尝试了

event.preventDefault();

方法在小于 1025px 的视口中不触发 mouseleave/mouseenter 函数，期望当我的鼠标悬停在

#menuhover

上时不会发生任何事情。不幸的是，它激活了

#sitenavigation

菜单。