jQuery slideToggle在一个包含thead和tbody元素的表格上。没有动画。 [英] jQuery slideToggle on a table with thead and tbody elements. No animation.

问题描述

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

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

这是表格

 <表> 
< thead> 
< tr> 
< td colspan =3> TABLE HEADING< / td> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td class =firstcolspan =1>单元格内容< / td> 
< td colspan =1>单元格内容< / td> 
< td colspan =1>单元格内容< / td> 
< / tr> 
< / tbody> 
< / table> 
  

以下是我正在使用的jQuery：

 < script type =text / javascriptlanguage =javascript> 
 $（document）.ready（function（）{
 $（thead）。click（function（）{
 $（this）.next（tbody）。slideToggle slow）; 
} 
）
}）; 
< / script> 
  

解决方案

由于<不管你用CSS设置它的高度，tbody> 通常不会比最高的 td 短。

这就是自然高度 tbody 似乎消失的原因，而具有人为额外高度的那个似乎运行到 tr 达到了它的自然高度。

你可以用 tbody {display：block;} 。 查看jsFiddle上的kludge。

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

可能最好的办法是将整个表格封装在一个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 =firstcolspan =1>单元格内容< / td> 
< td colspan =1>单元格内容< / td> 
< td colspan =1>单元格内容< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

请确定并修正表格宽度。

在jsFiddle上查看它的行动。

I have a table with a thead and tbody sections. I have applied a slideToggle on this successfully, but the animation is broken.

When a user clicks on the thead, I want the contents of the tbody to slide up. Currently what happens is the section simply disappears, without any animation.

Here is the table

<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>

And here is the jQuery I am using:

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

解决方案

It disappears because <tbody> normally will get no shorter than the tallest td, no matter what you set its height to with CSS.

This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height.

You can kludge around this with tbody {display:block;}. See the kludge at jsFiddle.

But, notice the effect that has when a table height is set.

Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:

<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>

Just be sure and fix the table widths the same.

See it in action at jsFiddle.

这篇关于jQuery slideToggle在一个包含thead和tbody元素的表格上。没有动画。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！