jQuery的覆盖隐藏在第二次点击

Question

我的网页上有很多图片。 当我将鼠标悬停在桌面上时，会有一个带有更多详细信息的叠加层。

<li>
 <div class="pic">
   <div class="overlay  touch">
     <div class="content">extra content here</div>
   </div>
  <img src="image.jpg" alt="" >
 </div>
</li>

由于mouseover事件在手机（特别是iOS）上不起作用，我正在使用以下脚本捕获手机触摸并显示叠加层：

$(".touch").on("mouseenter mouseleave touchstart", function(e){
   if(e.type == 'touchstart') {
     $(this).off('mouseenter mouseleave');
   }
  $(this).toggleClass("hover");
});

这一切都很好，但是现在我希望在第二次点击移动电话时隐藏该叠加层。

当前，如果单击页面上的另一个元素或“空白”空间，则叠加层将隐藏。

如何在第二次“触摸”点击时隐藏叠加层？

Answer 1

如果设备小于767px，则第一次单击将显示内容，第二次将其隐藏。

if($(window).width() < 767) {
    $('.touch').click(function() {
        $(this).find('.content').toggle();
    });
}

只需确保CSS中.content是display:none。