Question

我想在点击时更改按钮以阅读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');
        }
    });
});

DEMO

Answer 2

您只需使用.slideToggle()：

即可实现此目的

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

<强> Working Demo

Answer 3

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

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

http://jsfiddle.net/4dkoke6w/

我创建了一个类＆＃34;隐藏＆＃34;它适用于＆＃34;显示：无＆＃34;样式。

// 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");
});

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

3 个答案: