如何建立可折叠/可扩展的表行像news.google.com

Question

我正在建立一个网页，显示一些文章和相关的文章。我想创建一个类似于news.google.com

的东西

我强烈觉得有比我现在做的更好的方法，所以来这里征求建议。

目前我的html代码是这样的:

<table>
 <tr>
  <td><a href="article.htm">{{ArticleHeading}}</a> <br/> {{ArticleSynopsis}}</td>
  <td>{{ArticleSource}}</td>
  <td>{{ArticleDate}}</td>
 </tr>
</table>

我还设置了鼠标悬停时行颜色的变化。

.table-hover  {
    background-color:#FFE292;
    border:1px solid #DD9946;
    color:#000000;
}

我想要什么，不知道怎么做:

1。当用户在任何地方单击一行(不只是标题)时，表应该展开以显示另一个包含相关文章的子表。

2。如果可能的话，悬停效果在表格展开后停止。

我已经从http://twitter.github.com/bootstrap/javascript.html

看到了手风琴的例子

那不符合我的要求。

如果有什么地方不清楚，或者这个问题的范围很广，请让我知道。

Answer 1

我找到了一些可以帮助我实现news.google.com外观的东西http://jqueryui.com/addClass/

对于像我这样的jQuery初学者，这个页面也有非常好的学习资源。

http://docs.jquery.com/Main_Page