jQuery展开/折叠表中的TR与点击

Question

我有一个从数据库生成的表，我不能更改后面的代码。基本上它只是一个很长的事件清单，按天分隔。我想设置表格，以便您可以点击日期，然后显示当天的事件。正如我所说的只改变html。这是一个生成页面的xsl文件，它只是一个生成表格的长输出循环。我想隐藏“日”行下的“事件”行，并能够按天点击以显示事件。如果我可以改变每一天的课程，这很容易，但是我不能随着数据的生成而改变编程。

<table> 
 
<tr class="Date"><td>Day 1</td></tr> 
 
<tr><td>Event 1</td></tr> 
 
<tr><td>Event 2</td></tr> 
 
<tr><td>Event 3</td></tr> 
 

 
<tr class="Date"><td>Day 2</td></tr> 
 
<tr><td>Event 1</td></tr> 
 
<tr><td>Event 2</td></tr> 
 
<tr><td>Event 3</td></tr> 
 
<tr><td>Event 4</td></tr> 
 

 
<tr class="Date"><td>Day 3</td></tr> 
 
<tr><td>Event 1</td></tr> 
 
<tr><td>Event 2</td></tr> 
 
</table>

Answer 1

nextUntil是你的问题的答案：

nextUntil（选择） - 获取每个元素最多，但不包括匹配的元素的所有后面的兄弟姐妹通过选择器，DOM节点或jQuery对象

$('.Date').click(function() { 
    $(this).nextUntil('.Date').toggleClass('hide'); // don't use toggle() because it change display to block/none, we have to use display table-row 
}).click(); // hide by default 

和CSS：

tr.hide { display: none; } 

fiddle