iPhone:span点击不'我工作不好

iPhone: span click doesn't work fine

本文关键字：工作 span iPhone      更新时间：2023-09-26

当我想触摸span"箭头"以下拉第二级菜单导航时，我遇到了问题。当我触摸箭头时，结果和我触摸页面上的一样（例如哲学）。箭头有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;">
	  <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>

由于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);
相关文章：