Question

This question is about touch events in a list menu with sub-menus. The intent is to have action (on mobile devices) with one touch -> extend, 2nd touch retract. Touch another item -> it extends & previous retracts.

Here’s the problem: iPad 4.3.3 works great. iPhone 5.1 & Android 4 – 2nd touch retracts and extends. Not the desired effect. Check out an example here from your mobile device. Thanks for looking.

Is this a bug in jQuery or the mobile OS’s ?

$(document).ready(function () {   
    if((navigator.userAgent.match(/iPhone|iPod|iPad|Android/i))) {
        $('#nav li').click(function(){
            // attach a click event listener to provoke iPhone/iPod/iPad's hover event
            // Amended the next 3 lines 
            var $this_li = $(this);  
            $('#nav li ul').slideUp(function() {
                $('ul', $this_li).slideDown();
            });
        });
    } else {
        // This part works in non-mobile browser
        $('#nav li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(200);
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(200);         
            }
        ); 
    }  
});

Answer 1

After several trial and error hours, the following changes finally had the desired effect to mirror hover events on touch devices. That is, for an menu item with sub-menu (using id’s and without class attributes):

1. If sub-menu is up (hidden), slideDown.
2. If sub-menu is down (visible), slideUp.

3. If one sub-menu is down and another is selected, hide the down & slide down the selected.

   $('#nav li').click(function() {
       var $selected_li = $(this); 
       if ($('ul', $selected_li).is(':visible')) {
           $('#nav li ul').slideUp();
       }
       else {
           $('#nav li ul').slideUp(function() {
               $('ul', $selected_li).slideDown();
           });
       }
   });