如何構建可摺疊/可展開的表格行，如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; 
} 

我想要什麼，並不能找出如何做到這一點：

當用戶點擊一個行的任意位置（而不僅僅是標題），該表應展開以顯示另一個子表與相關文章。

2.如果可能，懸停效果在展開表格後停止。

我已經看到從http://twitter.github.com/bootstrap/javascript.html

手風琴例如不符合我的要求。

請讓我知道，如果有什麼不清楚或這個問題的範圍很廣泛。我很想解決你們的擔憂。

Answer 1

我找到了，這將有助於我實現news.google.com看 http://jqueryui.com/addClass/

而且這個頁面有jQuery的初學者和我一樣很不錯的學習資源。

http://docs.jquery.com/Main_Page