展开 div 以“阅读更多”

Posted 2023-02-24

【中文标题】展开 div 以“阅读更多”

【英文标题】：Expand the div to "read more"

【发布时间】：2014-02-06 19:49:25

【问题描述】：

我在我的网站中遇到了一个问题，我正在寻找解决方案。帖子是从 mysql 数据库中获取的。如果它包含几行，它会完全显示。但是，如果它包含太多行（从而在浏览器屏幕上占用更多空间），那么我希望它显示为单行，后跟点（例如，您的太长的帖子......）通过单击显示整个帖子的“查看更多”选项（如在 facebook、twitter 等中看到的）。它是 javascript 或 jquery 的客户端解决方案，还是可以通过 php 在服务器端处理。非常感谢您的建议！

整个帖子都是从 MySQL 中提取的，我直接回应它：

<?php
 //code
 while($row=mysql_fetch_array($result))
 
   echo $row['posts'];
 
?>

此时我只是从数据库中获取整个帖子并回显它。我想要一个 javascript 解决方案来完成剩下的工作。

【问题讨论】：

这可以用任何方式处理，但几乎没有 JS。你已经尝试过什么？

请提供您已经尝试过的代码。

使用混合解决方案（服务器端 + 客户端）处理它的优点是，在用户点击“阅读更多”之前，不会将长帖子下载到浏览器。

问题在于必须以何种方式处理，而不是如何处理。我想这取决于。如果 DOM 中充斥着很少见的信息（例如项目列表），那么我会通过 Ajax 从服务器调用文本内容并使用 jQuery / js 显示它。

问题也是：你会用PHP返回整个文本块并用Javascript从下载的文本块中隐藏多余的文本，还是你会用PHP削减一些文本并调用它后来与阿贾克斯？我想说，尽量减少下载用户可能永远不会看到的文本量。如果您有阅读更多内容的列表，则需要所有全文的机会很小。如果您有一个包含阅读更多内容的页面并且额外的文本大小可以接受，那么您可以立即下载它。 -> 下面已经回答了:-)

【参考方案1】：

你可以用 jquery 做到这一点：-

<div class="columns">
    your text goes here. Try long text here....
</div>

 a.morelink 
        text-decoration: none;
        outline: none;
    

    .morecontent span 
        display: none;
    

    .comment 
        width: 400px;
        background-color: #f0f0f0;
        margin: 10px;
    

<script>
var showChar = 120;
        var ellipsestext = "...";
        var moretext = "more";
        var lesstext = "less";

        $(".columns").each(function () 
            var content = $(this).html();

            if (content.length > showChar) 
                var first = content.substr(0, showChar);
                var second = content.substr(showChar - 1, content.length - showChar);

                var html = first + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + second + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                $(this).html(html);
            
        );

        $(".morelink").click(function()
            if($(this).hasClass("less")) 
                $(this).removeClass("less");
                $(this).html(moretext);
             else 
                $(this).addClass("less");
                $(this).html(lesstext);
            
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        ); 
</script>

【讨论】：

什么是“评论”类？

【参考方案2】：

HTML & PHP :

<?php
$text = '. . .';
$limit = 100;
?>
<div class="text">
    <?php
    if (strlen($text) < $limit) 
        echo $text;
     else 
        echo substr($text, 0 , $limit);
        echo "<br/><a href='#' onclick='showMore()'>read more</a>";
    
    ?>
</div>

jQuery：

<script>
    function showMore() 
        var text = '<?php echo $text; ?>'
        $(".text").html(text);
    
</script>

【讨论】：

它把我推向了正确的方向，因为我以前想过这样的事情......谢谢法拉赫

【参考方案3】：

你可以试试这个。

<?php
    $str = 'simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's';
    $limit = 40;
    if(strlen($str)>$limit)
        $stringCut = substr($str, 0, $limit);
        $serRpos = strrpos($stringCut, ' ');
        $first_part = substr(substr($str, 0, $limit), 0,$serRpos);
        $last_part = substr($str,$serRpos);
        echo $first_part;
        echo '<span style="cursor: pointer" onclick="showText(this)"> ...<span class="hide-text" style="display: none;">'.$last_part.'</span></span>';
    
    else
        echo $str;
    
?>

和脚本（我用jquery）

<script type="text/javascript">
function showText(e)
$(e).html($(e).find('.hide-text').html());

</script>