用于切换表行的JS Query无效

Question

我有以下html页面

$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
    <td colspan="2">Summary 1</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 2</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <td colspan="2">Summary 3</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

点击.header行时，它们不会折叠或展开 我尝试了最新版本的firefox，IE和Chrome ......这没用。

我错过了什么...... JS / JQuery等新手。

Answer 1

为了更好地使用，我创建了一个班级.hidden，我将点击它来切换它。

看看

jsFiddle

  $('tr.header').each(function(){
    var self = this;
    $(self).click(function(){
    $(self).nextUntil('tr.header').toggleClass('hidden');
  });
});