Странное поведение в функции jQuery

Question

Почему эти две функции имеют странное поведение, когда я нажимаю на thead, тело расширяется, а затем разрушается.

Во второй функции можно выполнить некоторое тестирование, добавив оповещения к оператору if, else, но оно попадет только в оператор if, поэтому будет только slideUP.

Еще одна вещь, которую я заметил, это то, что когда в теле есть только один ряд, он работает нормально. Почему?

Я также пытался добавить return false, и ничего, функция, которую он не вызывал дважды или в любом другом месте.

Я был бы признателен, если бы я мог исправить это.

Спасибо.

Function 1
$(function() {
    $("table.section thead").click(function() {
    $(this).next("table.section tbody").slideToggle("slow");

    });
});

Function 2
$(function() {
    $("table.section thead").click(function() {
      var body = $(this).next("table.section tbody");
      if (body.is(":visible"))
         body.slideUp("slow");
      else
         body.slideDown("slow");
    });
});

UPDATE Таблица

<table>
<thead>
<tr><td>heading></td></tr>
</thead>
<tbody>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
</tbody>
</table>

Answer 1

Я просмотрел списки рассылки jQuery, это сильно зависит от браузера, так как они обрабатывают таблицы и то, как они блокируются совершенно по-разному. Вместо этого я бы попытался поместить голову в другой элемент и сдвинуть всю таблицу, или вместо этого исчезнуть тело, что-то вроде этого:

$(function() {
  $("table.section thead").click(function() {
    $(this).next("tbody").animate({opacity: 'toggle'});
  });
});

Динамическая настройка размеров отдельных компонентов таблицы и корректная работа в разных браузерах, похоже, не стоит исправлять в среде jQuery, поэтому я не ожидаю, что это скоро изменится.

Answer 2

Непонятно, но если у вас ОБА они в вашем скрипте, вы дважды вызываете .click (), что равно:

$(function() { 
    $("table.section thead").click(function() { 
      $(this).next("table.section tbody").slideToggle("slow"); 
      var body = $(this).next("table.section tbody"); 
      if (body.is(":visible")) 
         body.slideUp("slow"); 
      else 
         body.slideDown("slow"); 
    }); 
});