title: jQuery single page site drop menu links fail on iOS iPad/iPhone
body: <p>I have a one-page scrolling site running jquery (not jquery mobile)
  I have an anchor link that triggers the display of a drop menu (unordered list). Clicking a list item within the drop menu animates the associated slide into view, and hides the drop menu.</p>
  
  <p>Works great on everything except iOS browsers.
  My problem is the link only works the first time it is clicked.</p>
  
  <p>I have read extensively about distinguishing mouse clicks and hover events on iOS. None of the solutions work for me.</p>
  
  <p>I have tried everything:</p>
  
  <ul>
  <li>Making the #btn_menu element an anchor and div</li>
  <li>Adding the cursor:pointer style on the links, the li tags, wrapped
  div tags</li>
  <li>Wrapping anchor tags on all list menu items</li>
  <li>Triggering touch events, plus trying to fire touchend, menu click
  events etc after the first click</li>
  <li>Touch libraries such as Hammer.js</li>
  </ul>
  
  <p>Simple code eg.</p>
  
  <pre><code>$("#btn_menu").on("click touchstart", function(e) {
      e.preventDefault();
      if ($(".nav_menu").css('display') == 'block') {
          $(".nav_menu").css('display','none');
      } else {
          $(".nav_menu").css('display','block');
      }
  });
  
  $(".nav_menu ul li").on("click touchstart", function(e) { 
      e.preventDefault();
      $(".nav_menu").css('display','none');
      gotoSlide($(this).attr('data-slide'));
  
      //Tried all this:   
      //$('body').trigger("click touchstart");
      //$('#btn_menu').trigger("touchstart touchend touchmove");
      //$('#btn_menu').data('clicked', null);
      //$('#btn_menu').trigger("mouseout");
  });
  </code></pre>
  
  <p>The HTML menu:</p>
  
  <pre><code>&lt;a id="btn_menu" href="#" data-role="button"&gt;
  &lt;span class="menutxt"&gt;MENU&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="nav_menu" style="display:none;"&gt;
  &lt;ul&gt;
      &lt;li data-slide="1"&gt;Home&lt;/li&gt;
      &lt;li data-slide="2"&gt;slide 1&lt;/li&gt;
      &lt;li data-slide="3"&gt;slide 2&lt;/li&gt;
      &lt;li data-slide="4"&gt;slide 3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>** What I know is happening **</p>
  
  <p>Only the first #btn_menu and subsequent .nav_menu li click works perfectly.
  But if I then touch/move the screen slighty, the proceeding #btn_menu click works. An event listener on the #btn_menu seems to get cleared?</p>
  
  <p>The hover event seems to keep working after the first click, and is interfering with all the proceeding clicks.
  I know this since the word "MENU" gets underlined when I click on it - I can't seem to clear the event listening for a hover on #btn_menu</p>
  
  <p>At my wits end.
  Does anyone have suggestions on how I can get the click events working on iOS on a single page site for this sort of drop menu?</p>
  
  <p>I tested solutions like slicknav.js within my code but these also exhibit the same problem.</p>