Check out the demo

使用的代码（jQuery）：

$(function(){
  $('#readmore').click(function(){
    $('#hello').animate({height:'100%'});
    $(this).hide();
    return false;
  });
});

Answer 2

请注意，这是快速原型设计。如果你使用jquery，你可以获得更好的里程。

<div>

<span> Biography, first half ...</span>
<a href="javascript:showAll('bioSecondHalf')">Continue reading</a>

<span id="bioSecondHalf" style="display:none"> Biography, second half</span>

</div>

<script type="text/javascript">
   function showAll(id) {
      document.getElementById(id).style.display = "block";
   }
</script>

如果您从完整的文本块开始，需要做客户端的所有事情：

<div id="biography" style="display:none">

Biography first half
Biography second half

</div>

如果文本块不包含标记html，那么，您可以获取传记div的内容并在页面加载时对其进行操作

<script>
window.onload = function() {
   var bioText = document.getElementById("biography").innerHTML;
   var bioFirstHalf = bioText.substring(0,bioText.length/2);
   var bioSecondHalf = bioText.substring(bioText.length/2);
   document.getElementById("biography").innerHTML = bioFirstHalf + " <a href='javascript:showAll(\"bioSecondHalf\")'>Continue reading</a>" + " <span id='bioSecondHalf' style='display:none'>" + bioSecondHalf + "</span>"
}
</script>

Answer 3

例如，请参阅this jquery plugin。

Answer 4

您可以将文本包装在div中，并在DOM准备就绪后立即隐藏该div。当任何人点击继续阅读链接时，您将显示div。此外，您可以通过以下代码实现显示/隐藏效果：

    function toggle(element) {
document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}

Answer 5

有更优雅的方式来绑定并执行此操作......但是快速而肮脏的方法......

<a href="javascript:void(0)" onclick="
    document.getElementById('more').style.display='block';
    this.style.display='none';
">show more</a>
<div id="more" style="display:none;">... more here</div>

Answer 6

您可以使用子字符串拆分数据分配var x = ${BIOGRAPHY.getData()};

然后var y只显示var x的前5个字符，这是你的数据。

var y = x.substring(0,5);

所以如果x = 123456789 然后你只会显示12345

然后使用jquery我们可以做

<div id="result">12345</div>
<a id="more" href="#">read more</a>
<script type="text/javascript">
    var x = '123456789';

    $('#more').click(function(){
        $('#result').text(x);
    });    

    </script>

点击此处查看工作示例 http://jsfiddle.net/alex00/7rn7Z/

继续阅读javascript中的链接

6 个答案:

Check out the demo