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/