html + css + jquery：切换显示更多/更少文本答案

【问题标题】：html + css + jquery: Toggle Show More/Less Texthtml + css + jquery：切换显示更多/更少文本
【发布时间】：2012-09-02 21:53:12
【问题描述】：

我正在处理一个个人项目，但遇到了一个小问题：

这是我的代码，目前有效：http://jsfiddle.net/gvM3b/:

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

问题是“（显示更多）”文本更改为“（显示更少）”，但在需要时不会切换回来。

^这是一回事，另外一件事是，如果您知道如何在显示更多但在文本上时添加 [...]。一直想弄清楚，但不得不寻求一点帮助，我是 jquery 的新手。

谢谢！

【问题讨论】：

标签： jquery toggle show

【解决方案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/

【讨论】：

【解决方案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.

【讨论】：

这在很大程度上取决于显示的确切文本，如果它是可翻译的标签，我认为您的代码将不够用。当然适用于这种特殊情况。
@JeroenMoons：确实，但如果它是一个可翻译的标签，您可以将文本替换为LabelHelper.getLabel("showMore") 之类的内容。对于给定的语言，文本不会发生变化。
是的，你是对的。我通常会尽量避免检查那种标签文本，我更喜欢像 css 类那样改变的更少的东西。但在这种情况下它可能会分裂头发:)

【解决方案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

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

我想推荐Jquery more less library，它可以解决“显示更多”“显示更少”问题。

另一种选择：cmtextconstrain

【讨论】：