javascript - Angular js像重叠的电子邮件线程一样显示gmail

Question

我正在尝试构建类似这样的东西(类似于 gmail 电子邮件线程):

 |--------------------------|
 |  first message (clipped) |
 |--------------------------|
 |--------------------------|
 |======= 4 messages  ======| 
 |--------------------------|
 |--------------------------|
 | 2nd last msg (clipped)   |
 |--------------------------|
 | Hello there,             |
 | this is my last message  |
 | complete text is         |
 | displayed                |
 |--------------------------|

您有多条消息，所有消息最初都是折叠的，用户只能看到最后一条消息，以及第一条和第二条最后一条消息的某些部分。当用户单击折叠部分的中心部分时，所有消息都会展开。

是否有 Angular 自定义指令提供类似的东西或我可以使用的开源东西，它将提供展开/折叠选项。我尽量避免从头开始写这个。

我看过引导 Accordion ，但它会展开/折叠整个消息线程。

感谢任何指导/帮助。

谢谢!

Answer 1

使用一些 CSS 也可以达到预期的效果:

<div class="inbox">
    <div class="message">
      Message 1
     </div>
     <div class="message">
      Message 2
     </div>
     <div class="message">
      Message 3
     </div>
     <div class="message">
      Message 4
     </div> <div class="message">
      Message 5
     </div> <div class="message">
      Message 6
     </div> <div class="message">
      Message 7 - last message
     </div>

</div>

CSS:

.message {
    height: 10px;
    border: 1px solid red;
    overflow: hidden;
}

.message:first-child {
    height: 100px;   
}

.message:last-child {
    height: auto;    
}
}

DEMO