jQuery切换tbody

Question

我在表格中嵌套表格，并希望在点击<th class="folder">时切换它们

    $('table').each(function(){
        $('th.folder', this).bind('click', function(){
            $(this).closest('table').children('tbody').toggle();
        });
    });

以下是一些典型的HTML：

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th class="type">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table>
          <thead>
            <tr>
              <th class="folder" colspan="2">Deal flow</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>item 1</td>
              <td>image</td>
            </tr>
            <tr>
              <td>item 2</td>
              <td>image</td>
            </tr>
          </tbody>
        </table>
        <table>
          <thead>
            <tr>
              <th class="folder" colspan="2">Rejected deals</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>item 3</td>
              <td>image</td>
            </tr>
            <tr>
              <td>item 4</td>
              <td>image</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

似乎没有用，我无法弄明白为什么！有什么想法吗？

Answer 1

See Working Example

---

请改为尝试：

  $('.folder').bind('click', function(){
     $(this).closest('table').children('tbody').toggle();
  });

Answer 2

您的上下文错误，请尝试$（'th.folder'）; 此外，我会使用live（）而不是bind（），因为live（）更快。