title: Clear toggle() on different screen size
body: <p>I have a link that I want to reveal more content on click, but only on mobile screen. I am using resize and load function to determine the screen size, however when I resize to small screen then to big screen and I click the link it still toggles, its like this unbind doesn't completely work, or sometimes it also affects the links on small screen and they stop working at all: </p>
  
  <p>fiddle here: resize your screen to test:
  <a href="http://jsfiddle.net/mp429cp5/1/" rel="nofollow">http://jsfiddle.net/mp429cp5/1/</a></p>
  
  <pre><code>$(window).on("load resize", function() {    
  if ($(window).width() &lt; 960) {
          $('ul').hide();         
              $('a').bind( "click", function() {
                  $('ul').toggle();
                  $('ul').toggleClass('collapsed');
                  return false;
              });
  } else if ($(window).width() &gt; 960) {
          $('a').click(function(){
              $('ul').unbind('click').toggle();
          });             
       }              
  });
  </code></pre>