Question

Having a few problems with mouse events on the iOS. The user taps on an item and can then tap out to remove a drop down that appears. It is critical that I use a drop down due to the large amount of items that my client’s website needs to represent. It’s a specific request that the website also works well on iOS. The issue is, when the user taps on the item it works correctly, however when they tap out and attempt to tap into the exact same drop down, it doesn’t work. It does work however if they open one item, then instead of opening it again, open another one and then open the first item.

As you will see from the script I have attempted to unbind all of the events and then rebind them, hoping it will cause the script to start working again. It also works fine on desktop, albeit with a few bugs. Any help getting this to work on iOS is very appreciated, I’ve attached it as a jsFiddle. Also any comments on my code is appreciated – always looking to improve!

http://jsfiddle.net/andrewkhan1/pLp2X/54/

Cheers in advance

Answer 1

You may try to do following:

1) Don’t use :hover in your iOS CSS for navigation

2) Make dropdown toggle onclick using CSS .hover class

3) Handle clicks outside navigation. Something like this:

$(document).bind('touchstart', function(e) {
    var target = (e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e).target;
    if(!$(target).parents('#navigation').length) {
        // hide dropdowns
        $('#navigation').find('.hover').removeClass('hover');
    }
});