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

它消失了，因为<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.

Answer 2

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

的CSS：

tbody{

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

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

2 个答案: