Question

所以我创建了div（它设置了高度和溢出），有两个段落和＃34;阅读更多＆＃34;链接。第二段是隐藏的。

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam iusto, voluptatum dolorem maiores ratione accusamus modi, sit. Velit nobis quod praesentium quaerat. Sunt mollitia odit asperiores numquam, debitis facere. Nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam iusto, voluptatum dolorem maiores ratione accusamus modi, sit. Velit nobis quod praesentium quaerat. Sunt mollitia odit asperiores numquam, debitis facere. Nulla.</p>
</div>
<div><a class="more" href="#">read more</a></div>

点击＆＃34时使用此脚本;阅读更多＆＃34;它显示了第二段。

$('.more').click(function(e) {
    e.stopPropagation();
    $('.text').css({
       'height': 'auto'
    });
    $('.more').hide();
});

我现在需要做的是将第一段中的文字截断为50个字符，并将其余部分替换为：＆＃34; ...阅读更多＆＃34;。再次点击＆＃34;阅读更多＆＃34;它应该显示两段中的所有文本。我该怎么做？

Answer 1

    var firstPara = $('.text p:first').text(); /* Get text in first paragraph */

    $('.text p:first').html(firstPara.substring(0,50)+' <a class="more" href="#">read more</a>');  /* Replace first paragraph text with first 50 characters  */

    $('.text p:last').append(firstPara.substring(50));  /* Append remaining text to Second paragraph   */

$('body').on('click','a.more',function(){
/*enable second para on more click*/
   $('.text p:last').show()
})

jquery - 截断段

1 个答案: