Question

我从api xml文档中获取文本并输出它。我需要限制显示的文本数量。但我做错了。我将div的高度限制为200px并隐藏溢出，然后通过单击按钮我显示文本。但当我再次隐藏它时，它不起作用。

这是jsfiddle：http://jsfiddle.net/liveandream/zXDKK/

如果有人还可以帮助我让它上下滑动，而不是将字符串减少一半，那将是非常感激的！谢谢！

Answer 1

绑定事件时.readLess不存在。试试以下代码，

请参阅下面的备用解决方案以获得更好的代码。

var div = $(".overview").height();
var content = $(".overview").html();
$(".overview").css("height", "200px");
$(".overview").css("overflow", "hidden");

$(document).on('click', ".readMore", function() {
    $(".overview").html(content);
    $(".overview").css("height", "auto");
    $("#read").removeClass("readMore");
    $("#read").addClass("readLess");
    $("#read").html("Read less");
});

$(document).on('click', ".readLess", function() {
    $(".overview").css("height", "200px");
    $(".overview").css("overflow", "hidden"); 
});

或者，你可以将它绑定到#read，这会更好..见下文，

DEMO

var $overview = $('.overview');
var $read = $('#read');

var div = $overview.height();
var content = $overview.html();
$overview.css({
    "height": "200px",
    "overflow": "hidden"
});

$read.on('click', function() {
    var $this = $(this);
    if ($this.hasClass('readLess')) {
        $overview.css({
            "height": "200px",
            "overflow": "hidden"
        });

       $read.removeClass("readLess").addClass("readMore").html("Read More");
    } else if ($this.hasClass('readMore')) {
        $overview.html(content);
        $overview.css("height", "auto");
        $read.removeClass("readMore").addClass("readLess").html("Read less");

    }
});

隐藏和显示不隐藏在jquery中的文本

1 个答案: