截断插件问题

我目前正在创建一个名为Truncate的jQuery插件-它的目的是缩短段落。

问题是，当你第一次点击显示更多而不是滑动到段落的隐藏部分时，它只是显示它。

我的默认值是:

 var defaults = {
            length: 120,
            MinExtra: 50,
            ShowMoreText: 'Show More',
            ShowLessText: 'Show Less',
            EllipsisText: '...',
            ShowLessAndMoreColor: 'black',
            SlideDownTime: 700,
            SlideUpTime: 700
        };

然后我有一个小变量使它起作用:

var options = $.extend(defaults, options);

加上一些额外的代码:

 this.each(function() {
            obj = $(this);
            var body = obj.html();
            obj1 = $(this);
            var body1 = obj1.html();

主代码是:

if (body1.length > options.length + options.MinExtra) {
                var splitLocation = body1.indexOf(' ', options.length);
                if (splitLocation != -1) {
                    // truncate tip
                    splitLocation = body1.indexOf(' ', options.length);
                    var str1 = body1.substring(0, splitLocation);
                    var str2 = body1.substring(splitLocation, body1.length - 1);
                    obj.html(str1 + '<span class="truncate_ellipsis">' + options.EllipsisText + '</span>' + '<span class="truncate_more">' + str2 + '</span>');
                    obj.find('.truncate_more').css("display", "none");
                    // insert more link
                    obj.append('<div class="clearboth" style="cursor:pointer;color:' + options.ShowLessAndMoreColor + ';">' + '<a href="#" class="truncate_more_link">' + options.ShowMoreText + '</a>' + '</div>');
                    // set onclick event for more/less link
                    var moreLinki = $('.truncate_more_link', obj1);
                    var moreContenti = $('.truncate_more', obj1);
                    var ellipsisi = $('.truncate_ellipsis', obj1);
                    moreLinki.click(function() {
                        if (moreLinki.text() == options.ShowMoreText) {
                            moreContenti.slideDown(options.SlideDownTimer);
                            moreLinki.text(options.ShowLessText);
                            ellipsisi.css("display", "none");
                        }
                        else {
                            moreContenti.slideUp(options.SlideUpTime);
                            moreLinki.text(options.ShowMoreText);
                            ellipsisi.css("display", "inline");
                        }
                        return false;
                    });
                }
            }
        });
    };
})(jQuery);

你可以使用:

$(document).ready(function() {
    $('#example').Truncate();
});

或者用它定义选项:

$(document).ready(function() {
    $('#example').Truncate({
    length: 120,
            MinExtra: 50,
            ShowMoreText: 'Show More',
            ShowLessText: 'Show Less',
            EllipsisText: '...',
            ShowLessAndMoreColor: 'black',
            SlideDownTime: 700,
            SlideUpTime: 700

});
});

还是不明白这个问题?请参见示例。

希望有人能给我任何主意如何阻止这种情况。谢谢!