Question

我有超过500个字符的段落。我想只获得最初的100个字符并隐藏其余部分。另外我想在100个字符旁边插入“更多”链接。点击更多链接整个段落应显示并编辑文本“更多”到“更少”，点击“更少”它应切换行为。段落是动态生成的，我无法使用.wrap（）包装它的内容。这是我拥有的和我想要的例子。

这就是我所拥有的：

  <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text.</p>

这是我在DOM加载时想要的东西

 <p>It is a long established fact that a reader will be distracted by ..More</p>

当用户点击“更多”

时，这就是我想要的

   <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using 'Content 
  content here', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text. ..Less</p>

当我们点击“Less”时，它应该还原点击“More”已经完成的内容。

我正在使用jQuery将子字符串拆分，切片并将其包装到我要隐藏的span中，但这不起作用。

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
    .slice(0, -1).join(" ") + "...More >>";
shortText.wrap('</span>');

Answer 1

小提琴：http://jsfiddle.net/iambriansreed/bjdSF/

jQuery的：

jQuery(function(){

    var minimized_elements = $('p.minimize');
    var minimize_character_count = 100;    

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < minimize_character_count ) return;

        $(this).html(
            t.slice(0,minimize_character_count )+'<span>... </span><a href="#" class="more">More</a>'+
            '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+' <a href="#" class="less">Less</a></span>'
        );

    }); 

    $('a.more', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $('a.less', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});

Answer 2

这不是谷歌的最佳结果，但我已经使用jQuery Expander plugin取得了巨大的成功。这很好，因为它不会隐藏搜索引擎机器人的任何内容。

Answer 3

感谢@iambriansreed的出色功能，这里稍微修改了截断行中断段：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(function(){

var minimized_elements = $('p.minimize');
var maxLines = 20;

minimized_elements.each(function(){    
    // var textArr = $(this).text().split(/\n/); // Not supported in IE < 9
    var textArr = $(this).html().replace(/\n?<br>/gi,"<br>").split(/<br>/);
    var countLines = textArr.length;

    if (countLines > maxLines) {
        text_less = textArr.slice(0, maxLines).join("<br>");
        text_more = textArr.slice(maxLines, countLines).join("<br>");
    }
    else return;

    $(this).html(
        text_less + '<span>... </span><a href="#" class="more">More</a>'+
        '<span style="display:none;">'+ text_more +' <a href="#" class="less">Less</a></span>'
    );
}); 

$('a.more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();        
});

$('a.less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
});

});

</script>

Answer 4

你看过jQuery Truncator插件了吗？

它几乎与你所描述的完全一致。

Answer 5

看起来有几个人打败了我，但这就是我想出来的。

var MORE = "... More...",
    LESS = " Less...";

$(function(){
    $("p").each(function(){
        var $ths = $(this),
            txt = $ths.text();

        //Clear the text
        $ths.text("");

        //First 100 chars
        $ths.append($("<span>").text(txt.substr(0,100)));

        //The rest
        $ths.append($("<span>").text(txt.substr(100, txt.length)).hide());

        //More link
        $ths.append(
            $("<a>").text(MORE).click(function(){
                var $ths = $(this);

                if($ths.text() == MORE){
                    $ths.prev().show();
                    $ths.text(LESS);
                }
                else{
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
});

Answer 6

所有来到这里寻找更多节目的人... 这是另一个插件http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

截断段前100个字符并隐藏段落的其余内容以显示/隐藏更多/更少链接的休息符号

6 个答案: