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

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 函数并将其与分配给页面链接的单击函数交换。我还希望此单击功能显示与图像关联的标题，并在第二次单击链接时隐藏标题。我尝试将它们换掉，但未能成功执行所需的结果。我对 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);
        });
    });

});