title: jQuery click stops css hover events
body: <p>I have a classical css drop-down menu with css hover selector switching to "display:block;"</p>
  
  <p>In order to work with touch devices, I have added this script:</p>
  
  <pre><code>$(document).ready(function () {     
      $("div.menuHead").click(function () {
          //Toggle the menu but don't include it in the hide selector using .not()
          $(this).siblings("div.menu").toggle();
          $("div.menuHead").not($(this)).siblings("div.menu").hide();
  });
  });
  </code></pre>
  
  <p>The hover drop-down continues working on desktops, while the menu can be clicked on a touch device. <strong>However, if the desktop user happens to click with the mouse, it works but completely disables hovering on all menus</strong>. Then only clicking works.</p>
  
  <p>Any idea why? I have tried disabling css hover properties completely, and handling everything in jQuery with mouseover and mouseout events, but when clicking iOs triggers a mouseover then a click event immediately, which open-closes the menu very quickly, so it does not work.</p>
  
  <p>Html structure:</p>
  
  <pre><code>&lt;div class="vectorMenu"&gt;
      &lt;div class="menuHead"&gt;Menu Title&lt;/div&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;Item1&lt;/li&gt;
              &lt;li&gt;Item2&lt;/li&gt;
              &lt;li&gt;Item3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Amongst other things I have set in CSS:</p>
  
  <pre><code>div.vectorMenu div.menu {
      display: none;
  }
  
  div.vectorMenu:hover div.menu {
      display: block;
  }
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Etienne</p>