javascript - 用于切换表行的 JS 查询不起作用

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');
  });
});