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

Question

我有一个切换按钮，基本上可以显示/隐藏“产品索引”页面上的过滤器列表。 桌面很简单，单击按钮时，面板将显示或隐藏以下脚本：

$(".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

看起来一开始就是可行的。 高于1024像素时，切换有效。 缩小浏览器意味着该按钮触发了滑出面板-太好了！ 但是，当还原到桌面时，只要单击切换，就会触发滑出菜单。 刷新后，它将再次起作用...直到您缩小浏览器并再次备份。

有任何想法吗？

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插件，并将其包含在该条件下运行的任何脚本中。

另外， mmenu的“响应式布局”文档提供了一个示例，该示例使用CSS媒体查询在某些断点处隐藏克隆的菜单。