如何將此圖像標題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);
        });
    });

});