如何将此图像标题Jquery的mouseenter功能更改为on click功能？

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 / mouseleave函数，并将其与分配给页面上链接的click函数交换。 我还希望该单击功能显示与图像相关的标题，并在第二次单击链接时隐藏该标题。 我尝试过仅将它们换出，但无法成功执行所需的结果。 我对JS有点陌生，这是我能想到的唯一使这部分代码起作用的事情。 有什么建议么？

Answer 1

工作演示

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

});