title: Providing "onClick" for iPad (touchscreens) and default functionality for desktop users
body: <p>Hoping someone can help me out here, been struggling with this for a little bit. I have the need to provide end users on a touch device the ability to "click" a drop-dwon menu to expose the submenu items. This is obviously a common UX construct in terms of the desktop experience, but in regards to mobile or touch devices, it is less than ideal. I understand this, but still need to offer this experience in the meantime as a temporary solution.</p>
  
  <p>Having said that, I am basically trying to find a simple way to:</p>
  
  <ol>
  <li>Detect if a user is on a "touch" device</li>
  <li>If "true" than allow them to tap the drop-down menu link in order to expose the sub-menu. Allow this menu to persist (remain open/shown) until they click a sub-menu link or outside of the menu area (in the jsFiddle below I am able to get the ontouchstart to work, but can't seem to figure out how to persist it and make it work for ALL a tag links in the menu). </li>
  <li>If "false", allow default functionality.</li>
  </ol>
  
  <p>Here is the working jsFiddle I have so far: <a href="http://jsfiddle.net/bingles/hPJVM/18/" rel="nofollow">http://jsfiddle.net/bingles/hPJVM/18/</a></p>
  
  <p>Also, here is the js code thus far:</p>
  
  <pre><code>var submenu = document.getElementsByTagName('a')[0];
  
  if ("ontouchstart" in window) {
      submenu.ontouchstart = function() {
          $(".simple-tabs li.deep").addClass("deep-hover");
      };
      submenu.ontouchend = function() {
          $(".simple-tabs li.deep").removeClass("deep-hover");
      };
  }
  else {
      $(".simple-tabs li.deep").hover(
  
      function() {
          $(this).addClass("deep-hover");
      }, function() {
          $(this).removeClass("deep-hover");
      });
      $(".simple-tabs.live li").each(function(i) {
          var parent = $(this);
  
          if ($(this).hasClass("current")) {
              $(".simple-tab-" + i).fadeIn("fast");
          }
          $(this).find("a").click(function() {
              parent.parent().find("li").removeClass("current");
              parent.addClass("current");
              $(".simple-tab").hide();
              $(".simple-tab-" + i).show();
              return false;
          });
      });
  }​
  </code></pre>
  
  <p>Haven't been able to make as much headway as hoped since I am still in the process of learning jQuery. Any help or guidance would greatly be appreciated!</p>
  
  <p>Thanks in advance.</p>