javascript - 如何用JavaScript生成类似Gmail的折叠效果

Question

我假设 Gmail 使用 JavaScript 来实现特定电子邮件线程的折叠效果。我说的效果是:当你点击选择某个邮件主题后，你会看到只显示最新的邮件，而之前的邮件全部处于折叠状态。仅当您单击折叠部分时，它们才会展开，但仍然只显示其中的一小部分。然后单击每个单独的部分，您可以阅读完整的消息。怎样才能做到这一点呢？非常感谢。

Answer 1

我假设您正在讨论线程中先前消息被折叠的效果，因此仅显示发件人的姓名和消息的前几个单词。

我会如何做:对于除未读邮件之外的每封邮件，加载发件人的姓名和正文的前 n 个字符。在表中显示所有以前的消息，每行都有一个 onclick 监听器。单击该行时，使用 Ajax 从服务器检索完整消息，并将 chop 的消息替换为完整消息。如果用户再次单击该行，则隐藏除前 n 个字符之外的完整消息。就 GMail 而言，当您单击电子邮件线程时，未读和/或最近的邮件会完整加载。

更简单的方法是:在页面加载时完整加载所有消息，但隐藏完整消息中除 n 个字符之外的所有字符，直到单击该行。这将使编码变得更容易，因为您不必搞乱 Ajax 并节省屏幕空间，但不会给您带来减少带宽使用的其他好处。