gpt4 book ai didi

第二次点击时jquery覆盖隐藏

转载 作者:行者123 更新时间:2023-11-28 01:21:25 25 4
gpt4 key购买 nike

我有一个包含许多图片的网页。在桌面上,当我将鼠标悬停时,我会看到一个包含额外详细信息的叠加层。

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

一切正常,但现在我希望在移动设备上第二次点击时隐藏叠加层。

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

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

最佳答案

如果设备小于 767px,第一次点击会显示内容,第二次会隐藏。

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

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

关于第二次点击时jquery覆盖隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51467150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com