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

Question

I have a toggle button which basically shows/hides a list of filters on a Product Index page. Desktop is simple, when clicking the button the panel is shown or hidden with the following script:

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

When the browser is below 1024px I use the mmenu plugin to duplicate the filters content and move it into an off-canvas panel. The code for that looks like this:

$(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();
    });
});

Obviously (at the minute) when the toggle button is clicked it will show/hide the content on the page but also trigger the slide-out menu at the same time.

My question is how can I only run the relevant script when it's needed. Is it also possible to do this on resize on not just on pageLoad/refresh?

I tried using matchMedia . Here's a quick CodePen showing where I'm at...

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

It looked like it worked to begin with. Above 1024px the toggle worked. Shrinking the browser down meant the button triggered the slide-out panel - great! But when scaling back up to desktop the slide-out menu is triggered whenever the toggle is clicked. On refresh it works again ...until you shrink the browser down and back up again.

Any ideas?

Answer 1

You can listen for window resize events, and fire functions accordingly. For example, in jQuery:

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

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

But, you'll need a way to disable that mmenu plugin when switching back to desktop, and include it in whatever script you run during that condition.

Alternatively, the mmenu "Responsive Layout" documentation provides an example for using CSS media queries to hide the cloned menu at certain breakpoints.