Javascript media queries: How to run script according to the screen width?

Question

I am currently developing a website and I have a problem for the responsive.

I have built my menu and I would like the sub-menus to appear after a hover when the screen width is greater than 980px. Below this width, I would like that the user click on a menu before the sub-menus appear.

Here is my HTML code

<nav>
<ul class="menulist">
    <li class="list-item"><a href="">list-item 1</a></li>
    <li class="list-item"><a href="">list-item 2</a></li>
    <li class="list-item"><a href="">list-item 3</a>
        <a href="#"></a>
        <ul class="sub-menu">
            <li class="list-item"><a href="">list-item 4</a></li>
            <li class="list-item"><a href="">list-item 5</a></li>
        </ul>
    </li>
</ul>

I tried to do it this way

if (window.matchMedia("(max-width: 980px)").matches) {
  $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
} else {
  $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

And also in this way,

if ($(window).width() < 981) {
    $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}
else {
    $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

But it doesn't work.

In fact the behavior does not change when I resize my browser. When I load the site on a mobile (so width< 981), it works fine at first. I click on the links before the sub-menus open. But when I enlarge the browser, the behavior doesn't change. I have to click on the links again before the sub-menus open.

it's the same when I load on a wide screen. The hover works normally. And when I reduce the screen it doesn't let the click work, the hover continues to work.

Someone can help me, please? Thank you.

Answer 1

Your "if" logic is in the wrong place. Your code is saying, "if the width matches, then set up one event handler, otherwise set up a different event handler". This "if" condition will only be evaluated on the initial window size. If you want this to behave correctly as the user changes the window size, then you need to set up both event handlers unconditionally and then put the "if" condition inside the event handler function. For example, inside the "hover" event handler, if the width < 981 then do nothing otherwise show the menu. Here's an example of what the code might look like (not tested):

$('.list-item > .sub-menu').parent().click(function() {
   if (window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});
$('.list-item > .sub-menu').parent().hover(function() {
   if (!window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});