title: open sub menu onclick and close opened sub menu
body: <p>I'm using a JS code to dispay sub menu from menu by clicking on li items.
  when I click on a li item, when sub menu slideToggle and if a sub menu is already openned then it's slideUp. It works perfectly.</p>
  
  <p>But I have juste one issue, when clicking on a li from my sub menu, it slideUp and then SlideToggle again, how can I prevent this ?</p>
  
  <p>Here is my jquery :</p>
  
  <pre><code>$("#menu li").click(function () {
      $('ul.sub-menu').not( $(this).children() ).slideUp();
      $(this).children("ul.sub-menu").slideToggle();
  });
  </code></pre>
  
  <p>and here is what I've tried so far without success :</p>
  
  <pre><code>$("#menu li").not($('#menu li sub-menu li a')).click(function () {
      $('ul.sub-menu').not( $(this).children() ).slideUp();
      $(this).children("ul.sub-menu").slideToggle();
  });
  </code></pre>
  
  <p>here is my html :</p>
  
  <pre><code>&lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;2
  &lt;ul class="sub-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;2.1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2.2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  &lt;/li&gt;
  &lt;li&gt;3
  &lt;ul class="sub-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;3.1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my CSS :</p>
  
  <pre><code>.sub-menu {display:none}
  </code></pre>
  
  <p>and a Jsfiddle to see it in action :</p>
  
  <p><a href="http://jsfiddle.net/2s023cfc/1/" rel="nofollow">http://jsfiddle.net/2s023cfc/1/</a></p>
  
  <p>can anybody help me with this ?
  thanks</p>