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

Question

我有一张带有 head 和 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>

Answer 1

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

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

您可以使用 tbody {display:block;} 来解决这个问题。 查看 jsFiddle 上的拼贴。

但是，注意设置表格高度时的效果。

也许，最好的方法是将整个表格包装在一个 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>

只需确保并将表格宽度固定为相同即可。

在 jsFiddle 上查看它的实际应用。

Answer 2

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

css：

tbody{

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