Collapsable div，但是从变量

中定义的某个点开始。我有一个包含一个div的所有文字，如：Collapsable 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插件来实现这一点？

来源

2012-09-18 Derfder

你已经回答了你的问题：“我想我应该得到的div的所有内容，然后找到的第一个如50个字符，并把有联系和所有其他文本放在一些将被隐藏的div中，点击链接后，其他的东西就会显示出来。“ – ankur

是的，但我不是很好的JavaScript和jQuery，我可以自己解决它。我需要一点点帮助，如何解决这个问题。我相信未来也会有其他人从中受益。 – Derfder

这里是另一种解决方案。

它不会简单地切断中间的单词，但会检查结尾，标点符号和长词。

$(".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/

来源

2012-09-18 11:02:31 VisioN

哇，谢谢这个解决方案很棒;） – Derfder

@Derfder很高兴，它证明了花费的时间:) – VisioN

在现代浏览器，你可以使用CSS属性text-overflow:ellipsis;

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

我用CSS在我的例子来展开文本，但你也可以使用jQuery，如果你想有一个show more链接做到这一点。

来源

2012-09-18 09:57:23 Andy

非常感谢，但是我不能依靠现代浏览器，因为用户也使用旧浏览器。所以，JavaScript是唯一的解决方案。 – Derfder

@Derfder我刚刚检查，似乎像浏览器支持并不是那么糟糕：http：//caniuse.com/text-overflow，但也许我可以后来当我有一段时间的JavaScript解决方案:) – Andy

+1我总是喜欢纯粹的CSS ... –

构建一个快速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};

来源

2012-09-18 10:19:38

谢谢，它看起来很有希望。我会尝试并给你一个反馈。 – Derfder

Collapsable div，但是从变量

回答

相关问题