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

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 (e.g Philosophie). Arrow have css--> cursor:pointer; On desktop version it works fine.

当我想触摸跨度'箭头'以下拉第二级菜单导航时，我有问题。当我触摸箭头时，结果与我在页面上触摸的结果相同（例如Philosophie）。箭头有css - > cursor：pointer;在桌面版上它工作正常。

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.

我使用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;">
	  <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>

1 个解决方案

#1

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

由于iPhone是触控设备，因此您应该使用触控事件而非点击事件。

So, you should:

所以，你应该：

Detect if the device is a mobile
检测设备是否为移动设备
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);

#1