我有一个桌子与一个和一部分.我已经成功应用了slideToggle,但是动画被破坏.
当用户点击thead时,我希望tbody的内容向上滑动.目前发生的是该部分简单地消失,没有任何动画.
这是表
<table>
<thead>
<tr>
<td colspan="3">TABLE HEADING</td>
</tr>
</thead>
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
这里是我使用的jQuery：
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("thead").click(function () {
$(this).next("tbody").slideToggle("slow");
}
)
});
</script>
解决方法
它消失,因为< tbody>通常不会比最高的td短,无论你用CSS设置什么高度.
这就是为什么自然高度似乎消失了,而具有人为超高度的人似乎跑直到tr达到自然高度为止.
你可以用tbody {display：block;}来对这个进行排除. See the kludge at jsFiddle.
但是,notice the effect that has when a table height is set.
可能最好的方法是将整个表格包装在div和slideToggle中,就像这样：
<table class="AbbyNormal">
<thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
</table>
<div class="tableWrap">
<table class="AbbyNormal">
<tbody>
<tr>
<td class="first" colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
<td colspan="1">Cell Contents</td>
</tr>
</tbody>
</table>
</div>
只需确保并修复表宽度相同.
