title: Sticky javascript when physically dragging to resize browser window
body: <p>I have a function(s) that expand a drop down list when the browser is size n. </p>
  
  <p>Size n is determined by css media queries and works as expected. </p>
  
  <p>However when I physically drag the width of the browser window out, the .click function remains bound to the element even though a media query indicates that a css hover effect takes place when the browser is size n + 1. </p>
  
  <p>A refresh at any point produces the desired behavior but of course I don't want to require a refresh. </p>
  
  <pre><code>   var section_4 = "#main-menu &gt; li:nth-child(4) &gt; a";
     var sub_section_4 = "#main-menu &gt; li:nth-child(4) &gt; ul";
  
      $( section_4 ).click(function() {
          $( sub_section_4 ).slideToggle(300);        
          return false;
      });
  </code></pre>
  
  <p>how can I apply this function only on a given size and not have the .click follow to the inline list ? thanks </p>