单击thead时隐藏表的tbody

Question

我有一个表格结构,如下所示.

    <table>
      <thead>
        <tr></tr>
        <tr></tr>
      </thead>
      <tfoot>
        <tr></tr>
        <tr></tr>
      </tfoot>
      <tbody>
        <tr></tr>
        <tr></tr>
     </tbody>
   </table>

我想在点击thead的第一行时切换显示/隐藏tbody和tfoot.我试了很多东西但是因为可能有多个这样的表而失败了.我正在使用jquery.提前致谢.

Answer 1

这是我的工作:

$(document).on('click','thead',function(){
       $(this).closest('table').find('tbody').toggle();
       $(this).closest('table').find('tfoot').toggle();
    });

继承人小提琴

Answer 2

尝试

$('thead').click(function(){
   $(this).siblings().toggle(); //$(this).siblings('tbody, tfoot').toggle();
})

演示:小提琴