切換替換文本的行爲

我有一個元素，當點擊它滑下來顯示其餘的內容時，它說「顯示更多信息」。切換替換文本的行爲

我需要的是點擊擴大說「顯示的信息較少」時更改文本，但後來改回爲「顯示更多信息」崩潰的時候。

下面是可以作爲一個起點，一個小提琴：http://jsfiddle.net/QWB4J/1/

我使用.replaceWith試過，但擴大和沒有崩潰時，它纔會起作用。

任何幫助，不勝感激。

編輯 -

下面是與解決方案小提琴：由willw提供http://jsfiddle.net/QWB4J/24/

解決方案。

來源

2012-01-03 Ricardo Zea

只需使用'.text（）'來設置內容。您必須設置哪個消息取決於元素的當前內容。 – 2012-01-03 16:34:27

您可以toggleClass呼叫後加入這樣的事情：

$(".desc").html($(".desc").hasClass("collapse") ? "Less" : "More");

希望它可以幫助

來源

2012-01-03 16:38:20 willvv

謝謝Willw，你的解決方案效果很好。二極管的解決方案也很好，但我選擇了你的，因爲它使用的代碼更少。只是一個簡單的問題：你的解決方案是否只是以優化的方式使用if/else？對不起，我對jQuery比較陌生。再次感謝。 – 2012-01-03 16:58:26

可以實現像這樣

$(this).prev("div.more-content").slideToggle(500, function() { 
    var s = $(".desc").toggleClass("collapse").hasClass("collapse"); 
     if(s){ 
      $(".more-title span").html("Show Less Information"); 
     }else{ 
      $(".more-title span").html("Show More Information"); 
     } 
});

看到一個演示在這裏：http://jsfiddle.net/diode/QWB4J/10/

來源

2012-01-03 16:43:15 Diode

二極管，感謝您的幫助，您的解決方案效果很好。 – 2012-01-03 16:59:37

切換替換文本的行爲

回答

相關問題