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媒體查詢在某些斷點處隱藏克隆的菜單。