Question

在php变量$preview中，我保存了大约4行没有任何标签的帖子。在$full我保存了带标签的帖子。

这是我以前拥有的，当我保存整个帖子时展开/折叠toogle http://fiddle.jshell.net/r4F8Q/22/。但如果没有标签，它看起来不太好，所以我需要前进一步。

我的问题是如何更改它，所以它会显示$preview，直到用户点击展开并显示$full帖子？

谢谢

Answer 1

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

Answer 2

这是我的版本：http://fiddle.jshell.net/r4F8Q/28/

我使用了单独的块进行预览和全部内容，并使用fadeIn\fadeOut来设置动画

Answer 3

如果您稍微修改html，可以将预览保存在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)');
    }
});

http://fiddle.jshell.net/r4F8Q/27/

如何使用jQuery / Javascript替换完整内容的帖子预览？

3 个答案: