title: Question - How to add window resize listener to document ready jquery function?
body: <p>I have a jquery script that opens sub menus but I need it to function differently at different window sizes.</p>
  
  <p>I one main menu that I use for both on-canvas and off-canvas by using media queries. The problem is that my script to open the sub-menus works correctly when the site loads but if you resize the window above or below 768px, which is the break point for switching between the on-canvas and off-canvas menu, the script doesn't respond accordingly. Instead, it continues to function at the original window size.</p>
  
  <p>How do I add a window resize listener so that the script fires correctly after the window is resized above or below the 768px break point.</p>
  
  <p>Thank you for any help you can provide. I truly do appreciate it.</p>
  
  <p>Here is my script:</p>
  
  <pre><code>$(document).ready(function() {
    if (window.matchMedia('(max-width: 767px)').matches)
    {
      $('.toggle-sub').click(function() {
        $(this).children('.menu-sub').slideToggle(200);
        $(this).find('i').toggleClass('fa-chevron-up');
      });
    } else {
      $('.toggle-sub').hover(function() {
        $(this).children('.menu-sub').slideToggle(200);
        $(this).find('i').toggleClass('fa-chevron-up');
        $(this).siblings().find('.menu-sub').slideUp(200);
        $(this).siblings().find('i').removeClass('fa-chevron-up');
  
        $('html').click(function(e) {
          if (e.target != '.menu-sub' &amp;&amp; $(e.target).parents('.menu-main').length == 0) {
            $('.menu-sub').slideUp(200);
            $('.menu-main').find('i').removeClass('fa-chevron-up');
          };
        });
      });
    }
  });
  </code></pre>