截断插件问题

Question

我目前正在创建一个名为截断的jQuery插件--它的目的是缩短一段时间。

问题是，当您第一次单击“显示更多的”而不是滑下段落的隐藏部分时，它只是显示了它。

我的缺省值是：

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

然后，我有一个小var来使它发挥作用：

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


});
});

还不明白这个问题吗？请看。

希望有人能告诉我怎么阻止这一切。谢谢!

Answer 1

这是因为span最初将显示设置为inline。内联元素不使用宽度和高度，所以您不能动画它们。一旦完成了一个slideDown，它就变成了inline-block，因此后续的slideUp和slideDown动画就可以工作了。

您可以通过在隐藏之前将其设置为inline-block来“修复”它。

obj.find('.truncate_more').css("display", "inline-block").hide();

你可以在这里试试：http://jsfiddle.net/LAhsp/2/

唯一的问题是它出现在一个新的行上。但是在您的版本中也会发生这种情况(在最初打开和关闭它之后)。