title: touchstart and touchend to simulate hover or mouseup and mousedown
body: <p>I need to simulate hover or mouseup/down in iphone menu, there are two examples I have given. </p>
  
  <pre><code>&lt;ul id="main_nav"&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;google&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://yahoo.com"&gt;yahoo&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;sub One&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;sub Two&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  //bind the touchstart event to the link element
  $('li').live('touchstart touchend', function(e){
      $(this).toggleClass('btn-sign-up-hover');
      //alert('alert');
  });
  
  a {
      display:block;
      line-height:30px;
  
  }
  
  li{
      background:#096;
  }
  
  .btn-sign-up-hover {
      background: #F3F;
  }
  </code></pre>
  
  <p>This is not working in iphone, </p>
  
  <p>but following is work</p>
  
  <pre><code>//bind the touchstart event to the link element
  $('li').live('touchstart', function(e){
      $(this).css('background','red');
      //alert('alert');
  });
  
  $('li').live('touchend', function(e){
      $('li').css('background','#096');
      //alert('alert');
  });
  </code></pre>
  
  <p>Issue is I need to use toggleClass.</p>
  
  <p>Fiddle example <a href="http://jsfiddle.net/UcyAb/" rel="nofollow">http://jsfiddle.net/UcyAb/</a></p>