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

Question

我想要触及跨度“箭头”以下拉菜单导航的第二级时遇到问题。 当我触摸箭头时，结果与我在页面上触摸的结果相同（例如Philosophie）。 箭头有css - >光标：指针; 在桌面版本上，它工作正常。

我使用iPhone 5.如果我触摸箭头并保持1秒，那么它工作正常。但是，如果我只触摸一次，那么它会引导我进入一个页面。

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;"> 
 
\t <li class="menu-item"> 
 
     <a href="#">Über uns</a> 
 
     </li> 
 
    \t <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

自认为iPhone是触摸设备，你应该使用触摸事件，而不是点击事件。

所以，你应该：

1. 检测，如果该设备是移动
2. 举止得体根据设备类型

下面是代码：

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);