爆炸/隐藏文本显示/隐藏（而不是展开，但将页面恢复为正常） [英] Explode/Implode Text on Reveal/Hide(and not expand but recompose page back to normal)

问题描述

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

显示/隐藏部分文本：

爆炸/ Implode文本：

我如何结合2？我想从部分隐藏段落文本开始，当有人点击阅读更多时，它会显示（打开）一个点，Implode文本将聚集在一起，并显示文本，图像等段落的其余部分。管他呢。对于有人点击折叠文本时，显示的段落部分会爆炸，点将关闭，并将页面恢复到原来的样子。

解决方案

您想要打开并清除的空间应该自动作为默认的DOM操作自动进行自行清理 。这段代码应该完全符合你的需求：）

编辑我修改了这段代码以适用于任何jQuery / jQuery UI。

 < a href =javascript :; id =openLink>了解详情< / 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> 
  

参考资料 - > 演示 - > JSFiddle

I found several different pieces of code, but I do not know how to put them altogether so they work together. Please help.

Reveals/Hides part of text: Show more show less with JQuery

Explode/Implode Text: Literally explode text apart to random places with jQuery

How do I combine the 2? I want to start off with partial of the paragraph text hidden, and when someone clicks "Read More" it will reveal(open up) a "spot" where Implode text will come together and reveal the rest of the paragraph with text, images, or whatever. For when someone clicks on "Collapse Text", the partial of the paragraph that was revealed will explodes and the "spot" will close up and restore the page back to the original way it was.

解决方案

The space you want Opened up and swept away should occur automatically as default DOM Manipulation "Cleans up after itself" in a way. This code should do exactly what you need :)

EDIT I've changed this code to work for any jquery/jquery UI. Remove the display none from the text and use this code.

 <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

这篇关于爆炸/隐藏文本显示/隐藏（而不是展开，但将页面恢复为正常）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！