Javascript jQuery:fadeIn/fadeOut-on-hover-移动设备上的替代方案？

我在jQuery中使用了fadeIn和fadeOut，它在桌面上运行良好。然而，在移动设备上（我只在iPhone上测试过），child div在触摸时打开，但在触摸外部元素后不会隐藏。我对jQuery相当陌生，所以我不太确定我可以在这里实现什么样的解决方案。也许是移动检测和执行触摸打开/隐藏，尽管我不知道如何才能做到这一点。以下是我的JSFIDLE：

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>

我尝试了此线程的第一个解决方案：

---

然而，由于我的知识有限，我无法使其正常工作。

悬停功能实际上不应该在触摸设备上使用。我想你需要检查一下touchstart的功能

编辑1： 例如：

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

但请记住，您仍然可以使用悬停javascript，但必须指定仅在非触摸设备上使用它。看看这个

希望这有帮助

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

编辑2：现代化非常方便。在你的情况下，你会得到一个类触摸或不触摸（在html元素上），这取决于你是哪个设备

所以在我的示例中，您可以使用它作为$（'.touch div.example'）

可能有不同的解决方案，但我认为这是最好的方法（另请参阅）。您只需将de modernizer.js文件添加到您的网站（最好在您的网页头部）

---

编辑3：我已经在iPhone和Android上测试了您的JSFIDLE示例，效果良好。因此，对我来说，这是一个很好的解决方案。

我能够通过@Nick帖子中的示例和我在OP:

以下是JSFIDLE：

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

偷窥-
喝倒采
.孩子{
显示：无；
}

如果您想详细说明一下，请编辑您的答案。如果没有，你应该把它作为一个评论发布。@Nick举个例子就好了@尼克，可以用if/else语句代替modernizer吗？看起来太复杂了。@Nick，我用你的例子和我在OP中链接的线程合并了这个解决方案：它至少在iPhone上运行良好，这个解决方案可用吗？

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


.child {
  display: none;
}