如何建立可折叠/可扩展的表格行，例如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