title: Toggle Class on cilck based on browser width (resize) via jQuery
body: <p>I have a button with toggle class attached to it - and it should work only when the borwser size is below 1200px. It works after refresh but somehow when I resize the window it sometimes works and sometimes doesn't - can't see the pattern. I see on the dev tools the the element is higlighted (so hte script is doing something) but I doesn't toggle the class. Tried to change it to addClass/removeClass but the result is the same. Any advice how to make it work would be much appreciated.</p>
  
  <p>CodePen: <a href="http://codepen.io/miunik/pen/oLWOLY" rel="nofollow">http://codepen.io/miunik/pen/oLWOLY</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul class="level-1"&gt;
    &lt;li class="btn"&gt;1 level item
      &lt;ul class="level-2"&gt;
        &lt;li&gt;2 level item&lt;/li&gt;
        &lt;li&gt;2 level item&lt;/li&gt;
        &lt;li&gt;2 level item&lt;/li&gt;
        &lt;li&gt;2 level item&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul.level-2 {
    display: none;
  }
  
  ul.level-2.open {
    display: block;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
    function setNav() {
      if (window.outerWidth &lt; 1200) {
        $('.btn').on({
          click: function() {
            $(this).children('.level-2').toggleClass('open');
          }
        });
      }
    }
    setNav()
    $(window).resize(function() {
      setNav();
      console.log(window.outerWidth);
    });
  });
  </code></pre>