javascript - 如何在单击 "more"链接之前 chop 文本？

Question

我有很多段落，我想将每个段落缩减为 2 行(50 个字符)，当您单击“更多”链接时，它会显示完整的段落。

我正在使用原型(prototype)库和 Rails。

理想情况下，我希望这样做时不要将段落分成 2 个 div，并在您单击更多时显示另一个。或者这是唯一的方法？

Answer 1

将您的文本放在一个 div 中并将高度设置为您想要的高度(溢出:隐藏)。单击更多链接时，将 div 高度设置为 div.scrollHeight 。如果您使用的是 jquery 或 mootools，则可以进行巧妙的转换。

<div id="myText" style="overflow:hidden; height:50px;">Text here...</div>
<a href="javascript:;" onclick="showMore()">more</a>

<script type="text/javascript">
function showMore() {
    var mydiv = document.getElementById('myText');
    mydiv.style.height = mydiv.scrollHeight; 
}

// or with a transition (mootools)
function showMoreTransition() {
    new Fx.Tween($('myText'), {
        duration: 1000
    }).start('height', $('myText').getScrollHeight());
}
</script>