jQuery slideToggle在带有thead和tbody元素的表上.没有动画.

Question

我有一个带有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>

Answer 1

它消失了,因为无论你用CSS设置它的高度,它<tbody>通常都不会比最高的更短td.

这就是为什么自然高度tbody似乎消失了,而具有人工超高度tr的自然高度似乎一直运行直到达到其自然高度.

你可以用它来解决这个问题tbody {display:block;}. 在jsFiddle看到kludge.

但是,请注意设置表高度时的效果.

也许,最好的方法是将整个表包装在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看到它的实际效果.