第二次点击时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>

由于鼠标悬停事件在移动设备(特别是 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();
    });
}

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