18

我有超过 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>

当我们点击“更少”时，它应该恢复点击“更多”所做的事情。

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

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

6 回答 6

40

小提琴：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();    
    });

});​
于 2012-07-10T16:36:50.603 回答
4

这不是谷歌的顶级搜索结果，但我使用jQuery Expander 插件取得了巨大成功。这很好，因为它不会对搜索引擎机器人隐藏任何东西。

于 2012-07-10T16:21:26.180 回答
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>
于 2013-11-11T11:52:21.453 回答
2

你看过jQuery Truncator插件吗？

它几乎完全符合您的描述。

于 2012-07-10T16:17:23.580 回答
2

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

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);
                }
            })
        );
    });
});
于 2012-07-10T16:55:45.623 回答
0

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

于 2015-01-07T15:16:37.637 回答