我工作的一個個人項目，我有一個小問題：HTML + CSS + jQuery的：切換顯示更多/更少文本
這是我的代碼代碼和當前工作：http://jsfiddle.net/gvM3b/：
$(".show-more").click(function() {
$(this).text("(Show Less)");
$(".text").toggleClass("show-more-height");
});
問題是「（顯示更多）」文本更改爲「（顯示更少）」，但在需要時未切換回。
^這是一回事，如果您知道如何在文字上顯示更多內容時知道如何添加[...]，那麼還有一件事。一直試圖弄清楚，但不得不尋求一點幫助，我是jquery的新手。
謝謝！
更新您的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");
});
使用三元運算，例如：
$(".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。
像這樣：
$(".show-more").click(function() {
$(".text").toggleClass("show-more-height");
if(!$(".text").hasClass("show-more-height")){
$(this).text("Show Less");
}else{
$(this).text("Show More");
}
});
另外還有一個解決辦法：
var i = 0;
$(".show-more").on('click', function() {
$(this).text(++i % 2 ? "(Show Less)" : "(Show More)");
$('.text').toggleClass("show-more-height");
});
我想推薦的Jquery more less library這需要照顧的「顯示更多」「顯示更少」的問題。
一種替代方案：cmtextconstrain
這取決於太多上顯示的確切的文本，如果這是一個翻譯的標籤，您的代碼將是不夠的，我認爲。當然在這個特殊情況下工作。 – Asciiom
@JeroenMoons：的確，但如果它是一個可翻譯的標籤，您可以用'LabelHelper.getLabel（「showMore」）''來代替文本。對於給定的語言，文本不會改變。 –
是的，你是對的。我通常會盡量避免檢查這種標籤文本，我更喜歡像css類那樣不需要改變的東西。但是在這種情況下它可能會分裂毛髮:) – Asciiom