title: Drop down menu with on click toggle
body: <p>I am attempting to create a drop down menu which activates on click rather than on hover. So far I have the on click working with a little javascript, but whilst the sub menus show well and if another menu is clicked other submenus hide, I can't work out how to hide a sub menu if its parent is clicked.</p>
  
  <p>EG in this <a href="http://jsfiddle.net/8qPvp/4/" rel="nofollow">JS fiddle</a>  I can click on "parent 1" to reveal its children and when I click on "parent 2" parent 1's children hide and Parent 2's children show. But if Parent 1's children show I want to be able to hide them by clicking on Parent 1 again, (or even better anywhere outside the children)</p>
  
  <p>I have seen examples working where each parent and sub menu is given individual classes or ids. I want to avoid that as it needs to work in a cms.</p>
  
  <p>Here's the basic code I have</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent 1&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 1 &amp;raquo; Child 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 1 &amp;raquo; Child 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 1 &amp;raquo; Child 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent 2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 2 &amp;raquo; Child 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 2 &amp;raquo; Child 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 2 &amp;raquo; Child 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Parent 3&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 3 &amp;raquo; Child 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 3 &amp;raquo; Child 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Parent 3 &amp;raquo; Child 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>The javascript:</p>
  
  <pre><code>$(document).ready(function () {
      $("li").click(function () {
          $('li &gt; ul').hide();
          $(this).children("ul").toggle();
      });
  });
  </code></pre>
  
  <p>CSS is probably not necessary, but its on the fiddle if needed</p>