隱藏和顯示文字不隱藏在jquery

Question

我從api xml文檔獲取文本並輸出它。我需要限制顯示的文字數量。但我做錯了什麼。我限制div的高度爲200px，並隱藏溢出，然後通過單擊按鈕我顯示文本。但是當我再次隱藏它時，它不起作用。

這裏是的jsfiddle：http://jsfiddle.net/liveandream/zXDKK/

如果有無論如何也有人可以幫我把它上下滑動，而不是削減了一半的話線，這將不勝感激！謝謝！

Answer 1

當您綁定事件時，.readLess不存在。嘗試下面的代碼，

請參閱下面的備用解決方案以獲得更好的代碼。

DEMO

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"); 

    } 
});