截断插件问题

Question

我目前正在创建一个名为 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


});
});

还是不明白问题所在？请查看Example。

希望有人可以告诉我任何想法如何阻止这种情况。谢谢！

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/

唯一的问题是它出现在新行上。但这也发生在您的版本中（在最初打开和关闭它之后）。