jQuery slideToggle sur une table avec des éléments thead et tbody. Pas d'animation

J'ai une table avec un thead et tbody sections. J'ai appliqué un slideToggle sur ce avec succès, mais l'animation est cassé.

Lorsqu'un utilisateur clique sur le thead, je veux que le contenu de la tbody à glisser vers le haut. Actuellement ce qui se passe est la section disparaît tout simplement, sans aucune animation.

Voici le tableau

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

Et voici le jQuery je suis en utilisant:

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

source d'informationauteur Rollcredit

  1. 33

    Elle disparaît parce que <tbody> normalement aurez pas plus courte que la plus haute tdquelle que soit sa hauteur avec les CSS.

    C'est pourquoi le naturel-hauteur tbody semble disparaître, tandis que celui avec les extra-hauteur semble courir jusqu'à la tr atteint sa hauteur naturelle.

    Vous pouvez quelque chose autour de cela avec tbody {display:block;}. Voir la bidouille à jsFiddle.

    Maisavis à l'effet qu'il a quand une hauteur de la table est définie.

    Probablement, la meilleure façon est d'envelopper l'ensemble du tableau dans un div et slideToggle que, comme suit:

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

    Juste être sûr et fixer le tableau des largeurs de même.

    à Voir en action jsFiddle.

  2. 0

    Je pense que vous devez définir une hauteur à l'tbody pour le faire fonctionner, regardez ce violon: http://jsfiddle.net/nicolapeluchetti/AsDvb/

    css:

    tbody{

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