“More"注释问题的功能

"More" functionality for comments problems

本文关键字：问题 功能 注释 More quot      更新时间：2023-09-26

我正在尝试为评论做一个"More"功能。

我如何努力使它工作:

  • 我把注释分成两部分——前200个符号和其余的符号。
  • 其余的符号放在<span class="hidden_comment_container" ></span>中，默认为display:none
  • 如果需要，切换显示剩余的位置(如果评论长度> 200个符号)。

这工作或多或少很好(jsfiddle演示)，但有两个问题。

  1. 在幻灯片上，hidden_comment_container接收display:inline-block并把事情搞砸了一点，因为它被转移到一个新的行(检查演示看看我的意思)
  2. 当向下滑动和向上滑动时，在动画结束时你可以注意到一些抽搐。
谁能帮我解决这两个问题?

第一个可以通过在隐藏其余文本的情况下添加以下内容来解决。

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

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

这里的

小提琴

第2点的答案可以在Basic jQuery slideUp和slideDown中找到!基本上，您需要在隐藏/显示元素之前显式地添加元素的高度。

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

替代方案

看看这个脚本，它做了你需要的一切!我已经在另一个项目上测试了它，它像一个魅力一样工作:jquery插件根据高度而不是字符数量截断元素

相关文章：