javascript - 为什么 jQuery slideToggle() 函数在我的表中表现异常？

Question

我正在用 HTML 制作一个原型(prototype)，我想制作一个表格，当用户点击一个按钮时它会显示更多的表格行。我想使用 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在我的 table 上。

我们将不胜感激任何帮助和提示!

Answer 1

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

这是您的解决方法:http://jsfiddle.net/5SYBe/12/