jQuery slideToggle 在带有 thead 和 tbody 元素的表格上。没有动画。答案

【问题标题】：jQuery slideToggle on a table with thead and tbody elements. No animation.jQuery slideToggle 在带有 thead 和 tbody 元素的表格上。没有动画。
【发布时间】：2016-12-18 00:11:46
【问题描述】：

我有一张桌子，上面有 thead 和 tbody 部分。我已经成功应用了slideToggle，但是动画坏了。

当用户点击 thead 时，我希望 tbody 的内容向上滑动。目前发生的情况是该部分只是消失了，没有任何动画。

这是桌子

<table>
  <thead>
    <tr>
      <td colspan="3">TABLE HEADING</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="first" colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
      <td colspan="1">Cell Contents</td>
    </tr>
  </tbody>
</table>

这是我正在使用的 jQuery：

   <script type="text/javascript" language="javascript">
      $(document).ready(function () {
         $("thead").click(function () {
               $(this).next("tbody").slideToggle("slow");
            }
         )
      });
   </script>

【问题讨论】：

这些错误的发生很可能是由于 css 中的高度设置。
那么，也许我应该在点击触发时通过jQuery为它设置一个高度？

标签： jquery html slidetoggle

【解决方案1】：

它消失是因为<tbody> 通常不会比最高的td 短，无论您使用 CSS 将其高度设置为多少。

这就是为什么自然高度 tbody 似乎消失了，而具有人造额外高度的人似乎一直运行直到 tr 达到其自然高度。

您可以使用tbody {display:block;} 解决这个问题。 See the kludge at jsFiddle.

但是，notice the effect that has when a table height is set.

可能，最好的方法是将整个表格包装在一个 div 和 slideToggle 中，就像这样：

<table class="AbbyNormal">
    <thead><tr><td colspan="3">TABLE HEADING</td></tr></thead>
</table>
<div class="tableWrap">
    <table class="AbbyNormal">
      <tbody>
        <tr>
            <td class="first" colspan="1">Cell Contents</td>
            <td colspan="1">Cell Contents</td>
            <td colspan="1">Cell Contents</td>
        </tr>
      </tbody>
    </table>
</div>

请确保表格宽度不变。

See it in action at jsFiddle.

【讨论】：

谢谢！这样就解决了问题。我最终将它包装在一个 div 中并在 div 本身上使用了一个 slideToggle。
这个解决方案怎么只有这么少的赞成票？？？非常感谢，@Brock Adams！今天早上遇到了同样的问题，你的解决方案很完美。

【解决方案2】：

我认为你应该为 tbody 设置一个高度以使其工作，看看这个小提琴：http://jsfiddle.net/nicolapeluchetti/AsDvb/

css:

tbody{

    height: 1000px;
    background-color: yellow;
}

【讨论】：

我已经做到了，但现在似乎发生的是动画一直运行到 tr 处于最小高度然后它们就消失了。