0

I have created a menu system where if I click on the top level menu item it will display the submenu, and then if I click off of it anywhere else on the page the submenu will disappear again. This works fine on desktop and android but not iOS.

$("#menu > li").click(function(e) {
    e.stopPropagation();
});
$("#menu > li > ul").click(function(e) {
    e.stopPropagation();
});
$("body").on("click", function(){
    console.log('test');
    $("#menu > li:nth-child(1) > ul").fadeOut("slow");
    $("#menu > li:nth-child(2) > ul").fadeOut("slow");
    $("#menu > li:nth-child(3) > ul").fadeOut("slow");
});

This piece of code is fairly simple. Fadeout if they click anywhere on the page (e.g. the <body> tag). And allow them to click within the menu by stopping the click events within the menu.

I have no idea why this wouldn't work in iOS, any ideas or suggestions would be greatly appreciated.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76
  • Possible duplicate of [jQuery click events not working in iOS](https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios) – Robin Zigmond Nov 05 '18 at 12:12

1 Answers1

0

Issue resolved by adding 'touchstart'.

$("#menu > li").on("click touchstart", function(e) {});

Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76