Edit 1
This is about touch events. 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 rub: iPad 4.3.3 works great. iPhone 5.1 & 6.0, & Android 4 - 2nd touch retracts and extends. Not the desired effect. Check out an example here 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 {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(200);
},
function () {
//hide its submenu
$('ul', this).slideUp(200);
}
);
}
});
First retract all the li's, then slidedown the clicked one in the slideup's callback. this way the clicked li slides down after the current li has been retracted.
$('#nav li').click(function(){
var $this_li = $(this);
$('#nav li ul').slideUp(function() {
$('ul', $this_li).slideDown();
});
});
} else {
etc