Что не так с этой функцией Jquery, помогите

Question

$(function() {
    $("table.section thead").click(function() {
      if ($(this).next("table.section tbody").style.display == "block"){
         $(this).next("table.section tbody").slideUp("slow");
      }
      if ($(this).next("table.section tbody").style.display == "none"){
         $(this).next("table.section tbody").slideDown("slow");
      }
    });
});

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

ОБНОВЛЯТЬ:

Я пытался использовать следующую функцию.

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

    });
});

Это доставляет мне проблему (когда он сворачивается и вы нажимаете на него, он расширяется, а затем снова схлопывается, так что он всегда будет сворачиваться).Вот почему я пытаюсь получить функцию вверху.

Answer 1

В этом случае используйте видимый селектор:

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

Но, вероятно, гораздо проще просто использовать .slideToggle() так:

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