如何使用jQuery/Javascript将文章预览替换为完整内容？

在一个php变量

$preview

中，我保存了一篇文章的大约4行，没有任何标记。在

$full

中，我用标签保存了完整的文章

这是我在保存整个帖子时使用的扩展/折叠工具。但是没有标签看起来不太好，所以我需要向前走一步

我的问题是如何更改它，使其显示

$preview

，直到用户单击展开并显示

$full

帖子

---

谢谢

在PHP脚本的输出HTML中添加两个元素；一个包含预览，一个包含全文。然后只需隐藏完整的（CSS“display:none；”），然后单击显示包含全文的元素，同时隐藏仅包含预览的元素？

以下是我的版本：

---

我使用了单独的块进行预览和完整内容，并使用

fadeIn\fadeOut

进行动画制作

如果稍微修改html，可以将预览保存在一个div中，将完整消息保存在另一个div中，然后按如下方式切换俯冲：

<div id="post">

    <div id="image">
        <img alt="image" border="0" src="here-goes-an-image.png">
    </div>

    <div id="text expanded">
        <a href="#" class="toggle">(expand)</a>
        <h2><a href="#" target="_blank">This is the title</a></h2>
        <div id="authorANDtime">
            <b>from <a href="#">author</a>, 22 mins ago.</b>
        </div>
                <div id='preview'>Here goes the preview vHere goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview Here goes the preview </div>  
        <div id="thepost">
            Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post. Here goes the content of the post.
            HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT. HERE IS THE HIDDEN CONTENT.
        </div>

    </div>

</div>

$('#thepost').hide();
$('.toggle').click(function(){

    $('#preview').toggle();
    $('#thepost').toggle();
    if($('#preview').is(':visible')){
        $(this).text('(expand)');
    }else{
        $(this).text('(collapse)');
    }
});

从，22分钟前。
预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览在这里预览
下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。下面是帖子的内容。
下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。下面是隐藏的内容。
$（'thepost'）.hide（）；
$（'.toggle'）。单击（函数（）{
$（“#预览”）.toggle（）；
$（“#thepost”）.toggle（）；
如果（$（“#预览”）。为（“：可见”）{
$（此）.text（“（展开）”）；
}否则{
$（this）.text（‘（折叠）’）；
}
});

---

谢谢您，但我如何将图像与展开的文本分开？我的意思是，我不希望文本出现在图像的底部。在内容中添加

padding left

。我已经更新了，再次感谢。我只是注意到，如果我有很多帖子，它就不能正常工作。我在这里更新的。也许是最近的一篇？我的错，它确实有效，但我不能折叠除第一篇以外的所有帖子。我已经更新了一点，它至少对3篇帖子有效：。唯一的问题是将ID的使用改为类，因为它不应该是页面上具有相同ID的2个元素。太好了，谢谢。有没有办法防止图片底部的文字出现？正如你在这里看到的，如果我有多篇文章，它就不起作用了。如何让它工作？