Question

I have a JS+CSS menu that works perfect on mouse hover, but I have to make it also work on click for touch devices.

The menu is something like this:

<div id="menucontainer">
  <ul id="jsddm">              
    <li class="topmenu"><a href="#">Main Menu</a>
      <ul style="visibility: hidden;">
          <li><a href="http://www.google.com">Google</a></li>
          <li><a href="http://www.apple.com">Apple</a></li>
          <li><a href="http://www.microsoft.com">Microsoft</a></li>
      </ul>
    </li>        
  </ul>
</div>

And the JS:

$(document).ready(function () {
    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout', jsddm_timer);

    // this work, but the submenus dont click
    $('.topmenu').bind('click', jsddm_open);
});

Tried different ways with no success

Working sample here:
http://jsfiddle.net/xjuZ4/

Answer 1

Put the click handler on the <a> tag. By putting the click handler on the top level <li> tag, you are intercepting any clicks on the child <li> tags as clicking on a child <li> tag is also clicking on the parent <li> tag.

You will want to add e.stopPropagation(); to your click handler on the <a> tag to stop the hover out from being triggered.

You will also most likely want to use the JQuery method .parent() to find the <li> that the <a> lives in when the click method is triggered.

Updated JSFiddle with multiple drop down menus.