javascript - 显示/隐藏时爆炸/内爆文本(不展开但将页面重新组合回正常状态)

Question

我发现了几段不同的代码，但我不知道如何将它们放在一起以便它们一起工作。请帮忙。

显示/隐藏部分文本: Show more show less with JQuery

爆炸/内爆文本:Literally explode text apart to random places with jQuery

如何将两者结合起来？我想从隐藏部分段落文本开始，当有人单击“阅读更多”时，它将显示(打开)一个“点”，其中内爆文本将聚集在一起，并显示段落的其余部分，包括文本、图像、管他呢。因为当有人点击“折叠文本”时，显示的段落部分会爆炸，“点”会关闭并将页面恢复到原来的样子。

Answer 1

您想要打开和清除的空间应该自动发生，就像默认的 DOM 操作“在自身之后清理”一样。这段代码应该完全满足您的需要:)

编辑我已更改此代码以适用于任何 jquery/jquery UI。从文本中删除“不显示”并使用此代码。

 <a href="javascript:;" id="openLink">Read More</a>
 <p id="text" >lorem ipsum dolowhatever this is</p>

 <script type="text/javascript">
$(document).ready(function(){ 
 $("#text").hide();
 $("#openLink").toggle(function () {
   $("#text").show('explode', {}, 600);
   $("#openLink").text("Read Less");
   }, function () {
   $("#text").hide('explode', {}, 600);
   $("#openLink").text("Read More");
  });
});
</script>

Reference --> Demo --> JSFiddle