如何將mouseenter函數更改爲此圖像標題Jquery的點擊功能？

Question

這是我之前用於顯示圖像圖像標題的代碼。它適用於帶有鼠標的設備，但我想稍微更新一下代碼，以便它可以適應沒有鼠標的用戶。這是代碼。

$(function() { 
    $(".thumb").mouseenter(function() { 
     var $t = $(this); 
     var $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.mouseleave(function() { 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 
}); 

基本上，我想改變的mouseenter /鼠標離開功能，並已分配到頁面上的鏈接點擊功能掉它。我也希望這個點擊功能可以顯示與圖像相關的標題，並在鏈接第二次點擊時隱藏標題。我試過把它們交換出來，但一直未能成功執行所需的結果。我對JS有點新，這是我能想到的使這段代碼適合我的意圖的唯一事情。有什麼建議麼？

Answer 1

Working Demo

$(function() { 
    $(".thumb").click(function() { //replaced to click 
     var $t = $(this); 
     $d = $("<div>"); 
     $d.addClass("desc").text($t.attr("alt")).css({ 
      width: $t.width(), 
      height: $t.height() - 20, 
      top: $t.position().top 
     }); 
     //added caption toggle 
     $t.after($d).fadeTo("fast", 0.3); 
     $d.click(function() { //replaced to click 
      $(this).fadeOut("fast", 0, function() { 
       $(this).remove(); 
      }).siblings("img.thumb").fadeTo("fast", 1.0); 
     }); 
    }); 

});