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

我在做一个HTML原型，我想创建一个表格，当用户点击一个按钮时将会显示更多的表格行。我想使用slideToggle函数或其他顺利的东西。为什么jQuery 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。

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

/Bill

来源

2013-04-27 XT_Nova

jQuery的幻灯片动画不支持表格行。只需将桌子分成两张桌子（可见的桌子和将要展开的桌子），然后将第二张桌子分成div。现在你可以slideToggle()这个div。

这是你的解决办法：http://jsfiddle.net/5SYBe/12/

来源

2013-04-27 16:15:42 Alex

谢谢你的回答。我很欣赏你用jsfiddle链接回答。然而，如果你看看你的jsfiddle，你可以在表格中看到表格数据不符合上表？如何解决这个问题？ =/ – 2013-04-27 16:51:23

由于现在有两个表格，每个表格都需要定义列宽。因此，要么为这两个表设置固定宽度，要么在展开时用Javascript动态确定列宽（jQuery的width（）将很方便）。您可能还想将灰色容器内的按钮移回。 – Alex 2013-04-27 16:56:29

您可以将代码包含在答案本身中，而不是作为jsFiddle的链接吗？ – ChrisF 2013-04-27 22:12:42

的问题是，你使用它tr元素，它不能被重新调整大小，以低于它们的内容。（即表的方式工作）

所以动画会尝试将它们的高度从0增大到最大值，但它会失败，因此您从一开始就看到它们的大小。

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

来源

2013-04-27 16:16:13

谢谢你和+1的解释。 – 2013-04-27 17:55:31

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

回答

相关问题