閱讀全文...如何在擴展後用Read less替換它？

你能幫我解決這個問題嗎？我在這裏尋找一個asnwer，但對我來說有點困難，因爲我是jQuery編程的初學者。我在這裏要做的是在用（'read less ...'）按下後替換（'read more ...'）文本。我試圖這樣做，但它一遍又一遍地失敗。我在這裏發現了其他的帖子，但我想用我製作的腳本來訓練更多。有什麼想法嗎？代碼在這裏。閱讀全文...如何在擴展後用Read less替換它？

$(document).ready(function(){ 
var $posts = $('#items > div'); 
var maxHeight = 95; 

$('a', $posts).live('click', function(){ 
    var $par = $(this).prev('p'); 

    var oH = parseInt($par.attr('class')); 

    if($par.height() == oH){ 
     $par.animate({ 
      'height': maxHeight 
     }, 'medium'); 
    }else{ 
     $par.animate({ 
      'height': oH 
     }, 'medium'); 
    } 
}); 

$posts.each(function(){ 
    if($('p', this).height() > maxHeight){ 

     $('p', this) 
      .attr('class', $('p', this).height()) 
      .css('height', maxHeight+'px'); 
     $(this).append($('<a>').text('read more...')); 
    } 
});

}）;

什麼樣的代碼，我應該在'read more ...'後按下（它展開 - 動畫向下）來代替'read more ...'替換'read less'。除了替換文本腳本工作正常..謝謝你給的任何幫助。我會很感激所有的提示。謝謝你在前進

來源

2012-07-20 Piotr Ciszewski

您可以更改鏈接文本通過調用$(this).text('....');

if($par.height() == oH){ 
    $par.animate({ 
     'height': maxHeight 
    }, 'medium'); 
    $(this).text('read more...'); 
}else{ 
    $par.animate({ 
     'height': oH 
    }, 'medium'); 
    $(this).text('read less...'); 
}

這裏是一個demo

來源

2012-07-20 18:31:11 Besnik

例子中的剩餘的文本溢出（鉻20 /的Mac OS 10.7）。確保設置'p {overflow：hidden; ''在你的CSS中。 – 2012-07-20 18:40:11

我已經添加了它，這是一個演示，展示如何設置「閱讀更多/更少」，而不是樣式標記等。 – Besnik 2012-07-20 18:43:21

非常感謝，我現在檢查它。 – 2012-07-20 19:14:08

閱讀全文...如何在擴展後用Read less替換它？

回答

相關問題