title: jQuery drop down navigation with click event
body: <p>I need to create a simple (2 levels) drop down menu with jQuery. There are a lot of solutions for drop down menus in the web but they all works with hover event. To be sure that it will work in iPhone I want to use a click instead hover and I have a problems.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul class="nav nav-top" id="nav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu Item 2&lt;/a&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu Item 3&lt;/a&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Submenu Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Menu Item 4&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
  $(".nav-top &gt; li:has(ul)").toggle(function(e) {
      e.preventDefault();
      $(this).find('ul').show();
      $(this).addClass("expanded"); //This class set display:block to UL
  },
  function(e) {
      e.preventDefault();
      $(this).find('ul').hide();
      $(this).removeClass("expanded");
  });
  
  $(".nav-top &gt; li:has(ul) ul").mouseup(function() {
      return false
  });
  $(document).mouseup(function(e) {
      if($(e.target).parent(".nav-top &gt; li a").length==0) {
          $(".nav-top &gt; li:has(ul)").removeClass("expanded");
          $(".nav-top &gt; li:has(ul) ul").hide();
      }
  });            
  </code></pre>
  
  <p>});</p>
  
  <p>It do not work correct. If click "Menu Item 2" then some where instead of menu and then again "Menu Item 2" it will not show drop down (see example: <a href="http://test.xhtml4u.ru/go/test.html" rel="nofollow">http://test.xhtml4u.ru/go/test.html</a> ), I think the reason in .toggle function, but do not know how to fix it.</p>
  
  <p>Thanks for any help. </p>