Here is a very simple Jquery code that enables to have dropdowns with touch support on Ipad and Iphone and all other devices with touch events.

First add the class touchdropdown to the Html tags with the mouseenter and mouseleave events:

<div id="mydropdown" class="touchdropdown"></div>

Then just add this code to your Javascript scripts:

if("ontouchstart" in window){
	$("html").addClass('touch');
}
$(".touch .touchdropdown").on('mouseenter', function(e) {
	$(this).data("touch",0);
});
$(".touch .touchdropdown").on('click', function(e) {
	$(this).data("touch",$(this).data("touch")+1);;
	if($(this).data("touch")!=2){return false;}
});

So now you can build your dropdown with mouseenter and mouseleave events:

$("#mydropdown").on('mouseenter', function(e) {
});
$("#mydropdown").on('mouseleave', function(e) {
});

Usually you build your dropdown with a mouseenter and mouseleave events but using touch devices the dropdown don’t works cause you have only the click or touch events.

The code above just counts how many clicks the .touchdropdown items had and fires the click event only if they have been already clicked one time already, implementing this way the dropdown with only touch clicks. To see it in action see the menu on Palomar website.