Question

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

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

Answer 1

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

所以，你应该：

检测设备是否为移动设备
根据设备类型正确行为

以下是代码：

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

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

1 个答案: