jQuery：悬停时淡入/淡出-移动设备上的替代方法？

Question

我在jQuery中使用fadeIn和fadeOut，它在桌面上可以正常工作。 但是，在移动设备上（虽然我仅在iPhone上进行过测试），子div可以在触摸时打开，但在触摸外部元素后不会隐藏。 我对jQuery很陌生，所以我不确定在这里可以实现哪种解决方案。 也许是移动检测并执行触摸以打开/隐藏，尽管我不知道该怎么做。 这是我的JSFiddle：

https://jsfiddle.net/9LL3mmzt/

jQuery的：

$(document).ready(function() {
  $(".parent").hover(function() {
    $(this).children(".child").fadeIn("fast");
  }, function() {
    $(this).children(".child").fadeOut("fast");
  });
});

HTML：

<div class="parent">
  <span>Peek-A-</span>
  <div class="child">
    <span>Boo</span>
  </div>
</div>

CSS：

.child {
  display: none;
}

我尝试了此线程的第一个解决方案： jQuery悬停功能超时

但是，由于我的知识有限，我无法使其正常运行。

Answer 1

悬停功能并不是您应该在触摸设备上真正使用的功能。 我认为您需要检查一下touchstart功能。

编辑1：一个例子是这样的：

$('div.example').on("touchstart", function (e) {
    alert('testing');
});

但请记住，您仍然可以使用悬停JavaScript，但是必须指定此选项仅在非触摸设备上使用。 参见Modernizr 。

希望这可以帮助。

仅供参考，@ James Douglas，您可以看到由于我的声誉得分，我无法发表任何评论。 如果可能的话，请发表评论或帮助我们找到这个问题的答案，我认为这会更有用。

编辑2：Modernizr非常方便。 在您的情况下，您将获得类别触摸还是非触摸（在html元素上），具体取决于您使用的设备。

所以在我的示例中，您可以将其用作$（'。touch div.example'）...

可能会有不同的解决方案，但是我认为这是最好的方法（另请参见使用JavaScript检测“触摸屏”设备的最好方法是什么？ ）。 您只需要将de modernizr.js文件添加到您的网站（最好在网页顶部）。

编辑3：我已经在iPhone和Android上测试了您的jsfiddle示例，并且可以正常工作。 所以对我来说这是一个好习惯。

Answer 2

我可以使用@Nick帖子中的示例以及我在OP中链接的线程的解决方案（至少在iPhone上）使此工作有效：

这是JSFiddle： https ：//jsfiddle.net/tkeaoffd/

JQuery的：

$(document).ready(function() {
  function hasTouch() {
    try {
      document.createEvent("TouchEvent");
      return (true);
    } catch (e) {
      return (false);
    }
  }
  var touchPresent = hasTouch();
  $('.parent').hover(function() {
    var caption = $(this).find('.child');
    caption.stop(true, true).fadeIn("fast");
    if (touchPresent) {
      $('.parent').on("touchstart", function(e) {
        $(this).children(".child").fadeToggle("fast");
      });
    }
  }, function() {
    $(this).find('.child').stop(true, true).fadeOut("fast");
  });
});

HTML / CSS：

<div class="parent">
  <span>Peek-A-</span>
  <div class="child">
    <span>Boo</span>
  </div>
</div>


.child {
  display: none;
}