如何生成與JavaScript中的Gmail類似的摺疊效果

Question

我假設Gmail使用JavaScript來實現特定電子郵件線程的摺疊效果。我所說的效果是：通過點擊某個特定的電子郵件線程後，您將看到只顯示最新的電子郵件，所有以前的電子郵件都處於摺疊狀態。只有當你點擊摺疊部分時，它們纔會展開，但仍然只顯示它們的片段。然後你點擊每個部分，你可以閱讀完整的信息。如何做到這一點？非常感謝。

Answer 1

我假設你說的是線程中以前的消息被摺疊的效果，所以只顯示發送者的名字和消息的前幾個單詞。

我該怎麼做：對於除未讀的消息以外的其他消息，請加載發送者的姓名和身體的第一個字符n。在每一行中使用onclick監聽器在表中顯示以前的所有消息。當單擊該行時，使用Ajax從服務器檢索完整消息，並用完整消息替換截斷消息。如果用戶再次單擊該行，則隱藏除第一個字符以外的完整消息。在GMail的情況下，當您單擊電子郵件線程時，未讀和/或最新消息將全部加載。

更簡單的方法是：在頁面加載時加載所有消息，但隱藏全部消息的所有字符，直到點擊該行爲止。n。這將使編碼更容易，因爲您不必混淆Ajax並節省屏幕空間，但不會給您帶來更少帶寬使用的其他好處。

Answer 2

使用jQuery非常簡單，可以很好地實現這種良好的視覺效果（如果您知道足夠的javascript和jQuery）。 toggle function是會起作用的功能。

accordion control of jQuery UI與gmail爲線程所做的很相似。不同之處在於手風琴只允許一個部分一次打開，而在Gmail中，幾個郵件可以一次打開。

所以我建議你使用下面的手風琴例子中的代碼，它允許一次打開多個部分，而不是手風琴控制自己。

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