JQuery slideToggle на таблице с элементами thead и tbody. Нет анимации.

У меня есть таблица с разделами thead и tbody. Я применил slideToggle на этом успешно, но анимация сломана.

Когда пользователь нажимает на thead, я хочу, чтобы содержимое тела скользило вверх. В настоящее время происходит то, что раздел просто исчезает, без анимации.

Вот таблица

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

Ответы

Ответ 1

Он исчезает, потому что <tbody> обычно не будет короче самого высокого td, независимо от того, что вы установили его высоту с помощью CSS.

Вот почему естественная высота tbody просто исчезает, в то время как одна с искусственной дополнительной высотой, по-видимому, работает до тех пор, пока tr не достигнет своей естественной высоты.

Вы можете обманывать это с помощью tbody {display:block;}. См. kludge в jsFiddle.

Но, обратите внимание на эффект, который имеет, когда установлена ​​высота таблицы.

Возможно, наилучшим способом является обертывание всей таблицы в 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>

Просто убедитесь и исправьте ширину таблицы.

Посмотрите на действие в jsFiddle.

Ответ 2

Я думаю, вы должны установить высоту для тела, чтобы заставить его работать, посмотрите на эту скрипту: http://jsfiddle.net/nicolapeluchetti/AsDvb/

CSS

tbody{

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