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

我正在用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();
  });
);

这是我桌子上的一张桌子

---

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

jQuery的幻灯片动画不支持表行。只需将该表拆分为两个表（一个是可见的，另一个是要展开的），然后将第二个表包装在

div

中。现在您可以

slideToggle（）

this

div

---

这是您的解决方案：

问题是您正在

tr

元素上使用它，这些元素的大小不能重新调整为小于其内容。。（这就是表格的工作方式）

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

---

同样的情况也发生在藏身处。当动画持续（在视觉上没有任何作用）时，你会看到它，在元素隐藏的最后，你会得到最终状态。

谢谢你的回答。我很感激你用jsfiddle链接回答。但是，如果您查看JSFIDLE，您可以在表中看到表数据与上表不一致？如何解决这个问题=/由于现在有两个表，每个表都需要定义列宽。因此，要么为这两个表设置固定的宽度，要么在expand上使用Javascript动态确定列宽（jQuery的width（）很方便）。您可能还想将灰色容器中的按钮移回去。您是否可以将代码包含在答案本身中，而不是作为指向JSFIDLE的链接？JSFIDLE包含我为了使其工作而更改的多行代码。它是+包装div，-隐藏trs，/移动按钮，/改变onclick JS。这说明了这个想法，而不是最终的解决方案。谢谢你和+1的解释。