title: JQuery add/remove class onClick
body: <p>Open submenu on click, close on next click - that's what i would like to achive.  example is <a href="http://jquery-plugins.net/page/6" rel="nofollow">this page</a> (submenu under 'follow' link).<br>
  it opens submenu (adds class 'open'), but not closing. stucked... :(</p>
  
  <p>my html:</p>
  
  <pre><code>&lt;ul id="toggle"&gt;&lt;li&gt;
  &lt;a href="#"&gt;Menu&lt;/a&gt;
  &lt;ul id="dropdown" class="dropdown-menu" role="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;2017&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2012&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2003&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;    
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function(){
  $('#toggle li').on('click', function(){
  $(this).removeClass('open').addClass('open');
  });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Gallex/32pv6xz8/7/" rel="nofollow">http://jsfiddle.net/Gallex/32pv6xz8/7/</a></p>