Question

我正在制作一个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。

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

Answer 1

jQuery的幻灯片动画不支持表格行。只需将表分成两个表（一个可见，一个将被展开）并将第二个表包装在div中。现在，您slideToggle()可以div。

以下是您的修正：http://jsfiddle.net/5SYBe/12/

Answer 2

问题是你在tr个元素上使用它，这个元素的大小不能小于它们的内容..（这就是表的工作方式）

因此动画会尝试将它们的高度设置为从0到完全设置，但它会失败，因此您可以从一开始就看到它们的全尺寸。

隐藏也是如此。虽然动画持续（没有任何视觉）你会看到它，并且在元素被隐藏的最后，你会得到最终的状态..

为什么jQuery slideToggle（）函数在我的表中对我来说很奇怪？

2 个答案: