如何将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); 
     }); 
    }); 

});