JavaScriptでGmailと同様の折りたたみ効果を生成する方法

Question

GmailはJavaScriptを使用して、特定のメールスレッドの折り畳み効果を実装すると仮定します。私が話している効果は、特定の電子メールスレッドをクリックして選択すると、直前のすべての電子メールが折りたたまれた状態で最新の電子メールだけが表示されることがわかります。折りたたみセクションをクリックしたときにのみ、展開されますが、まだスニペットが表示されます。次に、個々のセクションをクリックすると、完全なメッセージを読むことができます。どのようにこれを行うことができますか？どうもありがとう。

Answer 1

スレッド内の以前のメッセージが折りたたまれているので、送信者の名前とメッセージの最初の数単語だけが表示されているとします。

どうすればいいですか：未読メッセージ以外のすべてのメッセージについて、送信者の名前と最初のn本体の文字を読み込みます。各行にonclickリスナーを持つテーブルにすべての前のメッセージを表示します。行がクリックされたら、Ajaxを使用してサーバーから完全なメッセージを取り出し、切り捨てられたメッセージを完全なものに置き換えます。ユーザーが行を再度クリックすると、最初のn文字以外の完全なメッセージは非表示になります。 GMailの場合、電子メールスレッドをクリックすると、未読および/または最新のメッセージが完全に読み込まれます。

ページの読み込み時にすべてのメッセージを完全に読み込みますが、行がクリックされるまでメッセージ全体のn文字以外をすべて非表示にします。これにより、Ajaxを混乱させることなく、画面上のスペースを節約する必要がなくなるので、コーディングが容易になりますが、帯域幅の使用量が少なくなるという利点がありません。

Answer 2

jQueryを使用すると、（JavaScriptとjQueryが十分に分かっていれば）素晴らしいビジュアルエフェクトを作成するのは簡単です。 toggle functionはその効果を発揮する機能です。

accordion control of jQuery UIは、gmailがスレッドに対して行うことと実際に似ています。違いは、アコーディオンでは一度に1つのセクションのみを開くことができ、gmailでは複数のメールを一度に開くことができるという点です。

このように、アコーディオンコントロールの例ではなく、複数のセクションを一度に開くことができるコード例を使用することをお勧めします。

jQuery(document).ready(function(){ 
    $('.accordion .head').click(function() { 
     $(this).next().toggle('slow'); 
     return false; 
    }).next().hide(); 
});