考虑以下HTML结构:
<div class="parent">
<div class="image"></div>
<div class="text">
<h1><a href="link">LINK TEXT</a></h1>
</div>
</div>
和基本CSS
.text {
opacity: 0;
}
.show_title text {
opacity: 1;
}
文本开始隐藏。目标是使用jQuery检测移动设备中的用户何时触摸“父级”,然后该父级将在元素中添加一个CSS类并显示隐藏的标题。当用户停止触摸时,该类将被删除,文本再次被隐藏。我可以使用以下JS来实现这一点:
jQuery('.parent').on('touchstart touchend', function () {
jQuery(this).toggleClass('show_title');
});
但是,这会断开“文本” div内的链接。我需要一种解决方案,如果触摸并拖动“父级”,则显示文本,仅此而已;但是,如果有人触摸但没有拖动-即“触摸-点击”-则文本将出现并且将跟随链接。我该怎么办?