用jQuery點擊鏈接時更改文字

點擊時我想將按鈕更改爲Close，並且還可以用作關閉。用jQuery點擊鏈接時更改文字

如何與我當前的代碼實現這一目標？

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

    });

來源

2014-12-02 michaelmcgurk

您可以使用.is(':visible')檢查格是否可見，並適當設置文本。

代碼

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

DEMO

來源

2014-12-02 06:55:12 Satpal

太棒了，@Satpal – michaelmcgurk 2014-12-02 06:56:36

你可以簡單地實現這一點使用.slideToggle()：

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

Working Demo

來源

2014-12-02 06:52:17

幻燈片效果是完美的 - 我該如何將文本更改爲'關閉'？ – michaelmcgurk 2014-12-02 06:53:41

@michaelmcgurk：更新了答案和演示 – 2014-12-02 06:57:38

非常感謝:-) – michaelmcgurk 2014-12-02 06:57:53

使用的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"); 
});

來源

2014-12-02 07:09:44 Bhuvana

用jQuery點擊鏈接時更改文字

回答

相關問題