jquery - 用于缩短长段落的 jQuery 插件

Question

我有一个带有长段落的网站，并且我正在寻找一种方法来缩短初始演示文稿，所以我想要一个插件，让我可以选择扩展/收缩文本。

我已经找到了类似的东西，像这样：http: //jtsnake.github.com/jquery-readmore/但它不执行回滚功能。

我可以使用类似的东西吗？谢谢大家。

Answer 1

您可以使用相同的插件来执行此操作。从您下载的插件 zip 文件中打开 jquery.readmore.js。并从链接函数中删除以下代码行。

$(this).hide();

现在功能将是：

function linkage(elem) {
      elem.append(opts.more_link);
      elem.find('.' + opts.more_clzz).click( function () {
       elem.find('.' + opts.ellipse_clzz).hide();
        elem.find('.' + opts.hidden_clzz).animate({'opacity' : 'toggle'},1000);
      });
    }

在第一次单击时，它将显示有限的字符，然后再次缩短。您可以做的另一件事是缩短阅读更多文本：

more_link: '<a class="readm-more">Read&nbsp;More/Shorten</a>

PS：如果您愿意，我会尝试将文本从阅读更多更改为单击时缩短，反之亦然。

Answer 2

实际上我从来没有为这种动作制作过插件，所以我决定试一试，这就是我想出的 ->

function($){
  $.fn.clipped = function(options){ 
    var settings = $.extend({
      'text' : this.text(),
      'start' : 0,
      'end' : 255,
      'showFrom': 255,
      'readMoreText': 'Read More',
      'readLessText': 'Read Less'     
    }, options);

  return this.each(function(){
    var $this = $(this);
        var origTxt = settings.text;
    var clippedTxt = origTxt.slice(settings.start, settings.end) + "<div class='read-hidden' style='display:none;opacity:0;'>" + $this.text().slice(settings.showFrom) +"</div><span class='read-clipped'>....<a href='#' class='read-click'>"+settings.readMoreText+"</a></span>";
    $this.html(clippedTxt);

    $('body').on('click', 'a.read-click', function(){
      if($('.read-hidden').css('display') == 'none'){
            //true returned, make changes as necessary.
        $('.read-clipped a').text(settings.readLessText).appendTo($(this).parent('p'));

        //display the rest of the text        
        $('.read-hidden').css('display', 'inline');
        $('.read-hidden').animate({
          opacity:1
        }, 500); 
          //element is shown already, replace the text on next click.  
      }else if($('.read-hidden').css('display') == 'inline'){
        $('.read-hidden').animate({
          opacity:0  
        }, 500, function(){
          $('.read-hidden').css('display', 'none');
          $this.html(clippedText);      
        });
       }
     });
   });
  }
})(jQuery);

调用插件相当简单 ->

$('#element').clipped({ 
  // clip text at
  'start': 0, 
  //end clipped text at
  'end': 255, 
  //display the rest of the text starting from
  'showFrom': 255, 
  //Read More Text
  'readMoreText' : 'Read More Stuff',
  //Read Less Text 
  'readLessText' : 'Read Less Stuff'
 });