theadとtbody要素を持つ表のjQuery slideToggle。アニメーションはありません。

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>は通常、CSSで高さをどのように設定しても、tdよりも短くなることはありません。

自然高さ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

を私はあなたがこのフィドルを見て、それを動作させるためにTBODYに高さを設定すべきだと思います：http://jsfiddle.net/nicolapeluchetti/AsDvb/

CSS：

tbody{ 

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