title: open and close submenus on click Jquery
body: <p>I have a main menu that will display the submenus with a click event in jquery (client wanted to be click instead hover) so I got it working however I still can't figure out one thing: I have the menu and submenus working properly so when I click on "news" the submenu slides down nicely and when I click back on "news" it closes back, however if after openening news' submenu and I click on "resources" the respective submenu appears but news' submenu stays open, I want the previous submenu to close when clicking on another menu item or outside the main menu area any ideas? here's what I got:</p>
  
  <pre><code>&lt;ul id="MainMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
                &lt;a href="#"&gt;News&lt;/a&gt;
                &lt;ul class="noJS"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                         
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Jobs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Admin&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Resources&lt;/a&gt;
              &lt;ul class="noJS"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;sub menu 6&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="lastChild"&gt;&lt;a href="#"&gt;New Button&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>and the jquery:</p>
  
  <pre><code>    $(function(){
  $('#MainMenu').find('&gt; li').click(function(){
      $(this).find('ul')
      .stop(true, true).slideToggle(400); 
      return false;       
  });    
  });
  </code></pre>