Touch-screen users have to click link twice for it to work

Question

I have this drop-down menu that drops down on hover normally, but on touch devices, I simply made it so that you can click to open it as well. The problem is that it seems like the `<ul>` that drops down isn't completely in focus or something because I have to click the links twice on my iPhone 4 to make them work. Here's the code I'm working with: ``` $(document).ready(function() { $('.myMenu > li').bind('mouseover', openSubMenu); $('.myMenu > li').bind('mouseout', closeSubMenu); $('.myMenu > li').bind('click', toggleSubMenu); /* Also tried, currently using: $('.myMenu > li').bind('tap', toggleSubMenu); */ function openSubMenu() { $(this).find('ul').addClass("hovered"); }; function closeSubMenu() { $(this).find('ul').removeClass("hovered"); }; function toggleSubMenu() { $(this).find('ul').toggleClass("hovered").focus(); }; }); ``` The `.focus()` was the fix I tried adding. It didn't break the code but didn't fix it either. I know there are several things I can do to make it better fo…

Accepted Answer

When you mouseover a link in the submenu, the state of the parent list item changes.

However in iOS, when you click on a link in the submenu, it detects that the parent list item state needs to change, so instead of executing a tap, it's changing the state of the item, which is why it's requiring a second tap. (I hope this makes sense).

To cut to the chase, make sure there isn't a state change in the parent list item. Keep it the same when you hover over it as when you're hovering over the submenu links.

I haven't tested these and it's tough when I'm not working with the code live, but possible solutions could be as follows:

You could do it with jQuery and detecting a touch end, which isn't the best solution, but it should work:

```
$(".myMenu ul li a").on("touchend", function(event) {
  window.location.href = $(this).attr("href");
});
```

Another is to try to keep the state the same with CSS and it may keep Safari from detecting a change in state. (I removed my CSS answer since it didn't work)

Touch-screen users have to click link twice for it to work

Solution

Problem