使用jQuery单击链接时更改文本

Question

我想将按钮更改为在单击时显示“ Close ，并且也要充当“ Close ”按钮。

小提琴演示

如何使用当前代码实现这一目标？

jQuery的：

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");   
    });     

    // Switch visiblility of the "Close Panel" button
    $("#close").click(function () {
        $("div#panel").slideUp("slow"); 
    });

    });

Answer 1

您可以使用.is(':visible')来检查div是否可见并适当设置文本。

码

$("#open").click(function () {
    $("div#panel").slideToggle("slow", function () {
        if ($("div#panel").is(':visible')) {
            $("#open").text('Close');
        } else {
            $("#open").text('Quick Quote');
        }
    });
});

演示

Answer 2

您可以简单地使用.slideToggle()实现此.slideToggle() ：

$("#open").click(function(){
    if($("div#panel").is(':visible'))
         $(this).html('Quick Quote');
    else 
         $(this).html('Close Quote');
    $("div#panel").slideToggle("slow"); 
}); 

工作演示

Answer 3

使用SlideToggle是一个很好的解决方案。

您还可以使用addClass和removeClass实现功能。 无需对您编写的代码进行太多更改。

http://jsfiddle.net/4dkoke6w/

我创建了一个“隐藏”类，它应用了“显示：无”样式。

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");   
    $("#open").addClass("hidden");
     $("#close").removeClass("hidden");
});     

// Switch visiblility of the "Close Panel" button
$("#close").click(function () {
    $("div#panel").slideUp("slow"); 
    $("#close").addClass("hidden");
    $("#open").removeClass("hidden");
});