Question

我希望有一个表，用户可以使用漂亮的动画扩展/收缩表的内容（但不是标题）。

HTML：

<table class="generic-table" border="0" cellspacing="0">
<thead>
<tr class="generic-titlebar">
<th class="t2" colspan="3">
Announcements
<button class="chevron button" rel="forum_13"><img id="forum_13-showhide" class="showhide" src="/img/section_expanded.png" alt="show/hide"></button>
</th>
</tr>
</thead>
<tbody id="forum_13">
<!-- Table Content here -->
</tbody>
</table>

Jquery的：

$('.chevron').click(function() {
    if($('#'+$(this).attr('rel')).is(':visible') ) {
        $('#'+$(this).attr('rel')+'-showhide').attr('src', '/img/section_collapsed.png');
        $.cookie($(this).attr('rel'), '-', {expires: 30, path: '/'});
    } else {
        $('#'+$(this).attr('rel')+'-showhide').attr('src', '/img/section_expanded.png');
        $.cookie($(this).attr('rel'), '+', {expires: 30, path: '/'});
    }
    $('#'+$(this).attr('rel')).animate({ opacity: 'toggle', height: 'toggle' });
});

此代码适用于＆lt; div＆gt; s。但是对于tbody来说，高度并不具有动画效果。我该如何解决这个问题？

Answer 1

如果您为<table>而不是<tbody>的高度设置动画，该怎么办？

修改
这是你在找什么：http://jsfiddle.net/ebiewener/YawnP？

你只需将表格包裹在一个带溢出的div中：隐藏，然后展开＆amp;必要时签订div合同。

Answer 2

动画td的高度将是最佳选择。

tbody动画不透明但不高度

2 个答案: