HTML + CSS + jQuery的：切换显示更多/更少文本(html + css + jque

我工作的一个个人项目，我有一个小问题：

这是我的代码代码和当前工作： 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");
    }
});

更新小提琴

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/