1

我正在用 HTML 制作原型，我想制作一个表格，当用户单击按钮时，它将显示更多表格行。我想使用该slideToggle功能或​​平滑的东西。

它工作，显示内容，但有一些滞后或一些奇怪的事情发生。我在其他对象（不在表格中）上应用了一些相同的功能，并且效果很好。

这是我的脚本：

$(document).ready(function() {
  $('#show-more-rows').click(function() {
    $('#tr-button').slideToggle();
    $('.hidden-row').slideToggle();
  });
  $('#show-less-rows').click(function() {
    $('#tr-button').slideToggle();
    $('.hidden-row').slideToggle();
  });
);

这是我的桌子的jsFiddle。

任何帮助和提示将不胜感激！

4

2 回答 2

1

jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.

Here's your fix: http://jsfiddle.net/5SYBe/12/

于 2013-04-27T16:15:42.460 回答
1

The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)

So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.

The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..

于 2013-04-27T16:16:13.233 回答