jQuery slideToggle na stole z elementami thead i tbody. Bez animacji.

Question

Mam stolik z sekcjami thead i tbody. Z powodzeniem zastosowałem slideToggle, ale animacja jest zepsuta.

Gdy użytkownik kliknie na thead, chcę, aby zawartość tbody przesunęła się. Obecnie dzieje się tak, że sekcja po prostu znika, bez żadnej animacji.

Oto tabela

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

A oto jQuery Używam:

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

Answer 1

Znika, ponieważ <tbody> zwykle nie będzie krótszy niż najwyższy td, bez względu na to, jak ustawisz jego wysokość za pomocą CSS.

Po prostu wydaje się, że naturalna wysokość tbody znika, podczas gdy ten ze sztuczną dodatkową wysokością wydaje się działać, dopóki tr nie osiągnie swojej naturalnej wysokości.

Możesz kłaść się na tym z tbody {display:block;}. See the kludge at jsFiddle.

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

Prawdopodobnie najlepszym sposobem jest owinąć całą tabelę w div i slideToggle, że tak:

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

Tylko pamiętaj, i ustalić szerokość stołu to samo.

See it in action at jsFiddle.

Answer 2

myślę, że należy ustawić wysokość do tbody aby to działało, spojrzeć na ten skrzypce : http://jsfiddle.net/nicolapeluchetti/AsDvb/

css:

tbody{ 

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