Question

我有一个小的通用表，看起来像这样：

<table>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
</table>

我希望能够点击每个表数据来扩展其他信息。我是否可以仅使用css执行此操作，还是必须使用javascript？

Answer 1

我认为你不能用css实现这个目标但是使用jQuery的slideToggle()，这是一块蛋糕！

Answer 2

你可能会想要javascript（如果你想让这个项目在点击之后保持打开，肯定会这样）。但为了演示有些情况可以完全用CSS完成，这可以在CSS3浏览器中工作（只需按住鼠标按钮）。

<强> See the fiddle.

<强> HTML

<table>
<tr>
    <td>1<div>More info on 1</div></td>
    <td>2<div>More info on 2</div></td>
</tr>
<tr>
    <td>1<div>More info on 1</div></td>
    <td>2<div>More info on 2</div></td>
</tr>
</table>

<强> CSS

td {
    vertical-align: top;
}
td > div {
    height: 0;
    overflow: hidden;
}

td:active > div {
    height: auto;
}

是否可以仅使用css扩展和折叠表行/数据？

2 个答案: