Collapsable div，但是從變量

Question

中定義的某個點開始。我有一個包含一個div的所有文字，如：

<div class="text-container"> 
<p> 
Though we welcome the idea of a smaller connector, we're miffed that Apple couldn't just adopt the semi-industry standard of Micro-USB. That would make things easier for smartphone users across the globe. Yet, even so, the smaller connector may be a smart move for the future. The 30-pin connector has been around since 2003, long before the iPhone even existed: frankly, it's a dust magnet. A smaller connector helps shave extra space to achieve a smaller phone with perhaps a bigger battery. The new connector cable will mainly be used for syncing and charging by most people who own an Apple TV or Bluetooth/AirPlay accessories. 
</p> 
</div> 

而且我想創造這樣的事情：

<div class="text-container"> 
<p> 
Though we welcome the idea of a smaller connector...<a href="some-javascript-to-show-more">[show more]</a> 
</p> 
</div> 

我想我應該得到的div的所有內容，然後找到首先例如50個字符並放置一個鏈接，並將所有其他文本放入一些將被隱藏的div中，並在點擊該鏈接後顯示其他內容。

它應該是類似於切換的，如果它展開，則將文本從[show more]更改爲[show less]，反之亦然。

任何建議如何使用普通的javascript和jquery本身並且沒有其他jQuery插件來實現這一點？

Answer 1

這裏是另一種解決方案。

它不會簡單地切斷中間的單詞，但會檢查結尾，標點符號和長詞。

$(".text-container p").each(function() { 
    var val = $.trim(this.innerHTML), 
     parsed = val.split(/\s+/), 
     cut = parsed; 

    // for each word 
    for (var i = 0, k = 0; i < parsed.length; i++) { 
     k += parsed[i].length + 1; 

     if (k - 1 > 50) { 
      cut = parsed.slice(0, i); 
      break; 
     } 
    } 

    // if one long word 
    if (cut.length == 0) { 
     cut.push(parsed[0].substring(0, 50)); 
    } 

    val = cut.join(" "); 

    // if the text is long enough to cut 
    if (cut.length != parsed.length) { 
     this.innerHTML = val.replace(/[.,;?!]$/, "") 
      + "<span>...</span> "; 

     $("<span />") 
      .css("display", "none") 
      .html(parsed.slice(cut.length).join(" ") + " ") 
      .appendTo(this); 

     $("<a />", { 
      href : "#", 
      text : "[show more]" 
     }).on("click", function(e) { 
      var sh = this.innerHTML == "[show more]"; 
      $(this).prev("span").toggle(sh).prev("span").toggle(!sh); 
      this.innerHTML = sh ? "[show less]" : "[show more]"; 
      e.preventDefault(); 
     }).appendTo(this); 
    } else { 
     this.innerHTML = val; 
    } 
}); 

DEMO：http://jsfiddle.net/xRuch/

Answer 2

在現代瀏覽器，你可以使用CSS屬性text-overflow:ellipsis;

http://jsfiddle.net/Y8skB/1/

我用CSS在我的例子來展開文本，但你也可以使用jQuery，如果你想有一個show more鏈接做到這一點。

Answer 3

構建一個快速demo你

jQuery的

$(function(){ 
    var $el = $(".text-container").find("p"); 
    var str = $el.text(); 
    var str1 = str.substr(0,50), str2= str.substr(51); 
    $el.html(str1+" <span class='showMore'><a href='#'>Show more...</a></span><span class='moreText'>"+str2+"</span><span class='showLess'><a href='#'>Show Less</a></span>"); 

    $(".showMore").on("click", function(){ 
     $(this).next(".moreText").show(); 
     $(this).next(".moreText").next(".showLess").show(); 
     $(this).hide(); 
    }); 

    $(".showLess").on("click", function(){ 
     $(this).prev(".moreText").hide(); 
     $(this).prev(".moreText").prev(".showMore").show(); 
     $(this).hide(); 
    }) 

}); 

CSS

.moreText, .showLess { display:none};