Jquery change class on click menu
<p>I am trying to change the class of a menu item so that it appears on click. I have got it to work, the only thing it does not revert back when you click it again. I am not sure how to remove the class on click.</p>

<p>All help is much appreciated.</p>

<pre><code>   &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .menu ul li ul li {display:none}
  .menu .on ul li{display:block}
  .menu .on ul li ul{display:none}
  .menu .on ul li:hover ul{display:block}
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="menu"&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Toggle&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;See&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Toggle&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;See&lt;/a&gt;
  &lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;See 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;


&lt;script&gt;
$('li a').click(function() {
  $(this).parent().addClass('on').siblings().removeClass('on');
});

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
