Question

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


});
});

还是不明白这个问题？请参阅Example。

希望有人能给我任何想法如何阻止这一点。谢谢！

Answer 1

这是因为跨度最初的显示设置为inline。并且内联元素不使用宽度和高度，因此您无法为它们设置动画。完成slideDown后，它变为inline-block，以便后续的slideUp和slideDown动画有效。

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

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

您可以在此处试用：http://jsfiddle.net/LAhsp/2/

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

截断插件问题

1 个答案: