展開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以「閱讀更多」

回答

相關問題