javascript - 如何用jquery实现知乎的收起功能，点击收起的按钮后把某个特定用户的长篇大论彻底收缩（折叠）？

Question

如图所示：希望实现的功能有2个

• 如果鼠标滑动到红色分割线一下，网站会自动识别出下一个用户发表的文字数量，如果超出一屏幕，则显示收起的按钮，如果文字内容少于一屏，不显示收起的按钮

• 点击收起按钮后，文字显示行数为2行，出现显示全部按钮，点击显示全部按钮后，出现全部内容

• 请直接秀出您的代码。code it ,make it happen

Answer 1

实现第一个功能的基本思路是用 js 判断答案的高度，和答案的相对高度，当答案高度大于浏览器视窗高度且答案在浏览器视窗内时，显示收起按钮；
第二个功能的基本思路将答案分为两个部分，一个是全部内容，另一个是部分内容，点击收起按钮后全部内容隐藏，部分内容显示，且显示显示全部按钮。点击显示全部按钮时，部分内容隐藏，全部内容显示。
但是有一个问题是还没搞懂知乎是如何划分答案的部分内容的 ๑(°ο°)๑，猜测是通过截取字段？？等我后续update ୧(๑•̀⌄•́๑)૭
仿照知乎的收起答案功能写了一个小 demo，具体实现可以看一下这篇文章哦https://segmentfault.com/a/11...

Answer 2

每段评论都有容器吧，可以根据容器的行数或者字符数判断超过多少就隐藏多余的，行数=高度/行高，如何隐藏可以写死高度然后overflow:hidden;

Answer 3

做两个p，一个显示部分文字，一个显示全部文字，点击显示全部显示全部文字p，隐藏部分文字p；点击展开，显示全部文字p，隐藏部分文字p。
这仅仅是一个思路，实现的方式可能有很多种。

Answer 4

你用开发者工具查看知乎的网页元素就会看到，是通过控制两个p的display: block和display: none来实现这种效果的，至于如何截取部分内容，我猜测是截取一定字数

Answer 5

谢邀。评论有overflow:hidden;有高度。展开的时候hegiht:auto;缩小的时候。给一个固定的高度。两行文字高比如

Answer 6

简单的话就p.show hide

Answer 7

刚才在知乎看了下，就这简单