jquery - 如何制作 Gmail 类型的对话视图

Question

• 我想查看邮件列表，例如 gmail 对话。
• 看起来像手风琴的地方，
• 多条消息可以通过点击查看，

• 如果有 5 条或更多条消息，则视图应该像“旧消息”一样折叠

• 这怎么可能通过 jQuery 或其他更好的方法来实现。请给一些提示/帮助让我继续

Answer 1

这当然可以通过 jQuery 实现。但是，有许多方法可以实现此功能，有些方法比其他方法更简单。

第一个选项是在页面加载时简单地加载所有消息，然后隐藏除最后一个之外的所有消息。然后，您可以使用 jQuery 在用户点击时显示它。但是，这是非常低效的，因为它会减慢初始加载时间。在这里找到的手风琴（信用）是一个很好的起点。这是jQuery代码：

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

更好的选择是加载以前消息的基本数据（日期、发件人和主题），然后在用户单击消息时使用 AJAX 获取整个内容。这是一种更好的方法，因为您只在需要时才请求数据。您可以在他们的API Docs中阅读更多关于在 jQuery 中使用 AJAX 的信息。

这应该给你一个工作的起点。不过，您应该被告知，SO 不是得来速代码生成器。它用于询问与编程问题有关的特定问题。有了上面的信息，你应该做一些研究，试着把它们放在一起，如果/当你遇到问题时，在这里问。请务必包含您的代码以及对问题和期望结果的非常好的描述。