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

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

我想你應該的高度設置爲TBODY，使其工作，看看這個小提琴：http://jsfiddle.net/nicolapeluchetti/AsDvb/

CSS：

tbody{ 

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