折叠/展开表

Question

我正在寻找一个小的jQuery帮助折叠/展开表，我有我的网站上。我也想让桌子开始展开。

这里有一个表我的一个例子：

<table class="table"> 
    <caption> 
    <div class="video-header">Header</div> 
    </caption> 
    <tbody> 
    <tr class="video-row"> 
     <td class="field-title"> Content </td> 
    </tr> 
    <tr class="video-row"> 
     <td class="field-title"> More Content</td> 
    </tr> 
    </tbody> 
</table> 

我想它，当你点击“标题”它缩短了整个表，而不只是该行。

我发现下面example，但似乎无法将其翻译为我的情况。

Answer 1

只写一个click handler为标题元素

jQuery(function() { 
    $('table > caption').click(function() { 
     $(this).next().toggle(); 
    }) 
}) 

演示：Fiddle

Answer 2

，因为是动态生成你的表，你应该定义该表所在的父节点。这个父节点应始终存在于网页，并应不动态地生成。

<div id="table-container"> 
    <table class="table"> 
     <caption> 
     <div class="video-header">Header</div> 
     </caption> 
     <tbody> 
     <tr class="video-row"> 
      <td class="field-title"> Content </td> 
     </tr> 
     <tr class="video-row"> 
      <td class="field-title"> More Content</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 

然后在该父节点上绑定click事件。

$("#table-container caption").on("click", function(){ 
    $("#table-container table").css("display", "none"); 
});