jQuery的懸停功能，通過點擊平板電腦上的

Question

我有一個使用導航列表切換出的幻燈片圖像的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; 
    }); 

下面是爲導航列表

<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> 

這裏的HTML是它是如何工作的例子：ocgoodwill.org

如果有人可以幫助這將是大！

- 編輯 -

我也想補充一點，如果用戶已經聘請到的要素之一，然後敲擊不同的一個，第一個需要被複位，所以，如果他們點擊返回在它上面，它不會自動點擊。

Answer 1

UPDATE：在最近再次使用這個腳本之後，我意識到事情可以做得簡單得多，不需要任何標誌。

See revised code on my website.

原來的答覆：

今天有完全相同的問題。我解決了它使用的數據屬性，現場綁定到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：

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

Answer 2

我希望我能回覆原來的職位，但重置 'clicked_once' 狀態，喲ü應該能夠在c_kick代碼else語句的一開始就使用該位從原來的代碼

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

（或類似的東西）。