展开div以“阅读更多”

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

整个文章是从MySQL中取出，我立时呼应它：

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

在这一刻，我只是取从数据库中整个帖子和回声它。我想在这里一个javascript的解决方案做休息。

来源

2014-01-17 rosemary

这可以以任何方式来处理，但几乎W/O JS的。你已经尝试了什么？ – kirilloid

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

使用混合解决方案（服务器端+客户端）处理它的好处是，长篇帖子不会被下载到浏览器，直到用户点击“阅读更多内容”。 – pagliuca

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>

来源

2014-01-17 13:13:25

它让我朝正确的方向前进，因为我之前曾经想过这样的事情......感谢法拉 – rosemary

您可以用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>

来源

2014-01-17 13:03:04 Anup

什么是'评论'类？ – Foreever

它是包装类.... !! – Anup

你可以试试这个。

<?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>

来源

2016-03-17 09:46:17

展开div以“阅读更多”

回答

相关问题