iPhone：跨度点击无法正常工作

Question

I have problem when I want to touch on span 'arrow' to drop down second level of menu navigation. When I touch on arrow, result is same as I touch on page (eg Philosophie). Arrow have css--> cursor:pointer; On desktop version it works fine.

I use iPhone 5. If I touch the arrow and hold it for 1 second, then it works fine. But if I touch it just once, then it leads me to a page.

http://www.dodaj.rs/f/2n/ym/WnUC5W0/menu.jpg

 //First js for adding arrow $(".menu-item-has-children").each(function() { $(this).prepend('<span onClick="" class="arrow"></span>'); }); $(".main-menu .menu li").first().addClass("first-page-item"); //Second js for dropwdown submenu $('.arrow').on("click",function(e) { if ($(this).hasClass('opened')) { $(this).removeClass('opened'); $(this).parent().find('.sub-menu').slideToggle(); } else { $(this).addClass('opened'); $(this).parent().find('.sub-menu').slideToggle(); } e.stopPropagation(); }); 

 <ul class="menu"> <li class="menu-item"> <span onclick="" class="arrow opened"></span> <a href="#">Philosophie</a> <ul class="sub-menu" style="width: 208px; display: block;"> <li class="menu-item"> <a href="#">Über uns</a> </li> <li class="menu-item"> <a href="#">Unser weg</a> </li> </ul> </li> <li class="menu-item"></li> <li class="menu-item"></li> </ul> 

Answer 1

Since that iPhone is a touch device, you should use touch events instead of click events.

So, you should:

1. Detect if the device is a mobile
2. Behave properly depending on the device type

Here is the code:

function goArrow(e) {
    if ($(this).hasClass('opened')) {
        $(this).removeClass('opened');
        $(this).parent().find('.sub-menu').slideToggle();
    } else  {
        $(this).addClass('opened');
        $(this).parent().find('.sub-menu').slideToggle();
    }
    e.stopPropagation();
}

var TOUCH = "ontouchstart" in window;

if (TOUCH) $('.arrow').on("touchstart", goArrow);
else $('.arrow').on("click", goArrow);