2012-03-20 4 views
1

私はAPI XML文書からテキストを取得して出力しています。私は表示されるテキストの量を制限する必要があります。しかし、私は何か間違っている。私はdivの高さを200pxに制限しています。オーバーフローを隠してから、ボタンをクリックしてテキストを表示しています。しかし、私は再びそれを隠すために行く、それは動作しません。ここでjqueryに隠れていないテキストを隠して表示します

はjsfiddleです:http://jsfiddle.net/liveandream/zXDKK/

誰かがまた、私はそれが半分に言葉のラインをカット上下にスライドしていない助けることができるとにかくがある場合、それは非常に高く評価されるだろう!ありがとう!

答えて

0

イベントをバインドすると、は存在しません。以下のコードを試してください

より良いコードについては、下記の代替ソリューションをご覧ください。

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

    } 
}); 
+0

あなたは素晴らしいですがそんなにありがとう! – liveandream