如何构建可折叠/可展开的表格行,如news.google.com
问题描述:
我正在构建一个网页以显示一些文章和相关文章。我想创建类似于您在news.google.com上看到的内容如何构建可折叠/可展开的表格行,如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
手风琴例如不符合我的要求。
请让我知道,如果有什么不清楚或这个问题的范围很广泛。我很想解决你们的担忧。
东西沿[这些](http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript)行? – dsaa 2013-03-22 21:44:04
我会开始学习jQuery,如果我是你,用jQuery你可以做所有你已经概述的和更多:)当你的需求变得这么广泛时,你不得不开始编写自定义代码。 – agrublev 2013-03-22 21:50:38
谢谢!我知道基本的jQuery。有什么好的/快速的教程,我想实现的事情。或者,任何代码示例都会有所帮助。 – Watt 2013-03-22 21:56:15