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