jQuery媒体查询切换按钮-根据屏幕宽度的不同执行不同的操作

Question

我有一个切换按钮，它基本上是在产品索引页面上显示/隐藏过滤器列表。Desktop很简单，当单击按钮时，面板将通过以下脚本显示或隐藏：

$(".filter-toggle").click(function(){
    $(".grid").toggleClass("hide-filters");
});

当浏览器低于1024px时，我使用mmenu插件复制滤镜内容并将其移动到画布外的面板中。它的代码如下所示：

$(document).ready(function() {
    $(".filters").mmenu({
        // Options
        navbar: {
            title: "Filters"
        }
    }, {
        // Configuration
        clone: true,
        offCanvas: {
            pageSelector: ".page"
        },
        classNames: {
            selected: "active"
        }
    });

    var API = $(".filters").data("mmenu");
    var $icon = $(".filter-toggle");

    $icon.on("click", function() {
        API.open();
    });
});

显然(在那一刻)，当切换按钮被点击时，它将显示/隐藏页面上的内容，但同时也会触发滑出菜单。

我的问题是，我如何才能只在需要时运行相关的脚本。是否也可以在调整大小时执行此操作，而不仅仅是在pageLoad/refresh上？

我试过使用matchMedia。这是一个快速的CodePen，显示了我所在的位置。

https://codepen.io/moy/pen/wymvjN

看起来它一开始就起作用了。在1024px以上，切换起作用。缩小浏览器意味着按钮触发了滑出式面板-太棒了！但是，当向上缩放到桌面时，无论何时单击切换，都会触发滑出菜单。在刷新时，它再次工作...until，您缩小浏览器，并再次备份。

有什么想法吗？

Answer 1

您可以监听窗口大小调整事件，并相应地触发函数。例如，在jQuery中：

$(window).on('resize', function(e) {
  var windowWidth = $(window).width();

  if (windowWidth < 1024) {
    // initialize small viewport functionality
  } else {
    // initialized large viewport functionality
  }
});

但是，当切换回桌面时，您需要一种方法来禁用该mmenu插件，并将其包含在您在该条件下运行的任何脚本中。

或者，the mmenu "Responsive Layout" documentation提供了一个使用CSS media查询在某些断点处隐藏克隆菜单的示例。