HTML + CSS + jQuery的：切換顯示更多/更少文本

Question

我工作的一個個人項目，我有一個小問題：

這是我的代碼代碼和當前工作：http://jsfiddle.net/gvM3b/：

$(".show-more").click(function() { 
    $(this).text("(Show Less)"); 
$(".text").toggleClass("show-more-height"); 
});​ 

問題是「（顯示更多）」文本更改爲「（顯示更少）」，但在需要時未切換回。

^這是一回事，如果您知道如何在文字上顯示更多內容時知道如何添加[...]，那麼還有一件事。一直試圖弄清楚，但不得不尋求一點幫助，我是jquery的新手。

謝謝！

Answer 1

更新您的jQuery：

$(".show-more").click(function() { 
    if($(".text").hasClass("show-more-height")) { 
     $(this).text("(Show Less)"); 
    } else { 
     $(this).text("(Show More)"); 
    } 

    $(".text").toggleClass("show-more-height"); 
}); 

見http://jsfiddle.net/gvM3b/1/

Answer 2

使用三元運算，例如：

$(".show-more").click(function() { 
    var $this = $(this); 
    $this.text($this.text() == "(Show Less)" ? "(Show More)" : "(Show Less)"); 
    $(".text").toggleClass("show-more-height"); 
});​ 

或者用.text()與功能：

$(".show-more").click(function() { 
    $(this).text(function (i, oldText) {    
    return oldText == "(Show Less)" ? "(Show More)" : "(Show Less)";  
    }); 
    $(".text").toggleClass("show-more-height"); 
});​ 

DEMO。

Answer 3

像這樣：

$(".show-more").click(function() {   
    $(".text").toggleClass("show-more-height"); 
    if(!$(".text").hasClass("show-more-height")){ 
     $(this).text("Show Less"); 
    }else{ 
     $(this).text("Show More"); 
    } 
}); 

updated fiddle

Answer 4

另外還有一個解決辦法：

var i = 0; 

$(".show-more").on('click', function() { 
    $(this).text(++i % 2 ? "(Show Less)" : "(Show More)"); 
    $('.text').toggleClass("show-more-height"); 
}); 

小提琴：http://jsfiddle.net/gvM3b/6/

Answer 5

我想推薦的Jquery more less library這需要照顧的「顯示更多」「顯示更少」的問題。

一種替代方案：cmtextconstrain