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