Question

我正在尝试为评论制作“更多”功能。

我是如何努力使其发挥作用的：

我将评论分为两部分 - 前200个符号和其余符号。
其他符号位于<span class="hidden_comment_container" ></span>，默认情况下为display:none
切换以显示其余部分（如果需要）（如果评论长度> 200个符号）。

这或多或少都有效（jsfiddle demo），但有2个问题。

在滑行时，hidden_comment_container收到display:inline-block并稍微搞砸了一些东西，因为它会被转移到一个新行（查看演示以了解我的意思）
当向下滑动并向上滑动时，在动画结束时您会注意到一些抽搐。

有谁能帮我解决这两个问题？

Answer 1

第一个可以通过在隐藏剩余文本时将以下内容添加到案例中来解决。

$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() { 
        $('.hidden_comment_container').css('display', 'inline');
    });

基本上您正在更改display选择器的.hidden_comment_container属性，因为我相信slideDown正在向其添加display:inline-block，这会导致它跳转线。

<强> Fiddle here

在Basic jQuery slideUp and slideDown driving me mad!中可以找到第2点的答案;基本上你需要在隐藏/显示之前显式添加元素的高度。

作为旁注，css属性content只能与伪元素:after和:before一起使用;我相应地更新了我的小提琴。

另一种解决方案

看看这个脚本，它可以满足您的一切需求！我已经在另一个项目上测试了它，它就像一个魅力：jquery plugin to truncate elements based on height instead of number of characters

注释问题的“更多”功能

1 个答案:

另一种解决方案