Jqueryhoverfunction，点击平板电脑

我有一个jquery幻灯片，它使用导航列表来切换幻灯片图像。 它的工作原理是当您将鼠标hover在导航列表上时，它会突出显示（’。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

 
 
 
 
Text Text Text
 
Text Text Text
  
 
Text Text Text
 
 
 
  

以下是它的工作原理示例： ocgoodwill.org

如果有人能提供帮助那就太棒了！

– 编辑 –

我还想补充一点，如果用户点击其中一个元素，然后点击另一个元素，则需要重置第一个元素，这样如果他们重新点击它，它就不会自动点击。

Answer 1

更新 ：在最近再次使用这个脚本后，我意识到事情可以做得更简单，根本不需要任何标志。

请参阅我网站上的修订代码。

原始答案：

今天有同样的问题。 我使用数据属性解决了它，活动绑定到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); } }); 

这应该会阻止平板电脑在第一次点击时激活链接，在第二次点击时激活它。

编辑 ：如果有多个链接元素，当单击其中一个元素时需要“重置”，请尝试将数据属性附加到父容器：

HTML：

 
 Link 1 Link 2 Link 3  

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

Answer 2

我希望我能回复原帖，但要重置’clicked_once’状态，你应该可以使用原始代码中的这一位

 $(".image_thumb ul li").removeClass('clicked_once'); 

（或类似的东西）在c_kick代码的else语句开头。