[英]Jquery hover function and click through on tablet
我有一个jquery幻灯片,它使用导航列表切换出幻灯片图像。 当您将鼠标悬停在导航列表上时,它会突出显示(.active),相关的图像会切换到该列表。 导航列表中有链接,也可以单击链接以转到其他页面。
我需要在平板电脑上使用它,以便当该人点按导航列表时,它将变为活动状态,然后切换图像幻灯片显示,然后再次点按,它将继续显示该链接。 现在发生的事情是,一旦您点击它,它就会变为活动状态并单击。
这是jQuery
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").hover(function(e){
//Set Variables
e.preventDefault();
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8, marginBottom: "0" }, 250 );
$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
});
这是导航列表的html
<div class="image_thumb">
<ul>
<li id="one">
<h2><a href="styleguide.html">Text Text Text</a></h2>
<p><a href="styleguide.html">Text Text Text</a></p>
<a class="imgloc" href="content/images/home/01.jpg"></a>
<div class="block">
<p>Text Text Text</p>
</div>
</li>
</ul>
</div>
这是一个工作原理示例: ocgoodwill.org
如果有人可以帮助,那就太好了!
-编辑-
我还想补充一点,如果用户点击了其中一个元素,然后点击了另一个元素,则需要重置第一个元素,这样,如果他们再次点击它,它就不会自动点击。
更新 :在最近再次使用此脚本之后,我意识到可以简化很多事情,根本不需要任何标志。
原始答案:
今天有完全一样的问题。 我使用data属性(实时绑定到touchstart事件)解决了它(这是基本的触摸设备检查,但您可以使其更彻底)。 尝试使用以下代码,替换“ clickable_element”以满足您的需求。
$('clickable_element').live("touchstart",function(e){
if ($(this).data('clicked_once')) {
// element has been tapped (hovered), reset 'clicked_once' data flag and return true
$(this).data('clicked_once', false);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
e.preventDefault();
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
$(this).data('clicked_once', true);
}
});
这样可以使平板电脑停止在第一次点击时激活链接,而在第二次点击时激活它。
编辑 :如果有多个链接元素,则在单击其他元素之一时需要“重置”,请尝试将data属性附加到父容器:
HTML:
<div id="parent-element">
<a href="" id="1">Link 1</a>
<a href="" id="2">Link 2</a>
<a href="" id="3">Link 3</a>
</div>
jQuery的:
$('#parent-element a').live("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().data('clicked') == $link_id) {
// element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
$(this).parent().data('clicked', null);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
e.preventDefault(); // return false; on the end of this else statement would do the same
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
$(this).parent().data('clicked', $link_id);
}
});
我希望我可以回复原始帖子,但是要重置“ clicked_once”状态,您应该可以使用原始代码中的这一位
$(".image_thumb ul li").removeClass('clicked_once');
(或类似的东西)在c_kick代码的else语句开始时。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.