html + css + jquery:切换显示更多/更少文字 [英] html + css + jquery: Toggle Show More/Less Text

问题描述

我正在做一个个人项目，但是有一个小问题:

I'm working on a personal project and I'm having a small issue:

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

This is my code code and currently works: http://jsfiddle.net/gvM3b/:

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

问题在于，((显示更多)")文本变为((显示更少)")，但在需要时不会切换回去.

The issue is that the "(Show More)" text changes to "(Show Less)" but not switches back when needed.

^这是一件事，如果您知道在文本上显示更多的时候知道如何添加[...]，那将是另外一件事.一直在试图找出答案，但不得不寻求一点帮助，我对jquery还是陌生的.

^That's one thing, an additional thing would be if you know how to add the [...] when it says show more but on the text. Been trying to figure it out but had to ask for a little of help, I'm new to jquery.

谢谢！

推荐答案

更新您的jQuery:

Update your 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/

这篇关于html + css + jquery:切换显示更多/更少文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！