jQuery中的可折叠表
我正在尝试创建一个具有标题行的表，可以使用jQuery折叠和扩展。 到目前为止，这是我的全部代码：
$(document).ready(function() { $("tr#cat1.header").click(function () { $("tr#cat1.child").each(function() { $(this).slideToggle("fast"); }); }); }); Cat1 Row data1 data2 data3 data4 Cat1 Row data1 data2
如果我是正确的，英文的jQuery部分读作如下：“当点击ID为’cat1’的行和’header’类的行时，查找id为’cat1’的所有行和一个类’孩子’，每个人都可以滑动。“
然而，当我运行它并点击标题行时，没有任何反应。 任何见解？
编辑：在HTML表格中添加了第二个类别。 对不起，我应该更具体一点。 我希望能够单击特定类别的标题行，并且只有那些子行折叠，而不是页面上的所有子行。 以这种方式，该表的行为类似于“手风琴”，并且行按类别分组。
这将导致单击仅影响包含您单击的标头的表中的行，这意味着您可以将其更改为使用css类而不是复制id。
$("tr#cat1.header").click(function () { $("tr#cat1.child", $(this).parent()).slideToggle("fast"); });
基本上this是单击的标头，我们将其包装在jQuery对象中并调用parent() （返回表），然后将其指定为新查询的上下文。
您的页面现在看起来像这样：
Cat1 Row data1 data2 data3 data4
Cat1 Row data1 data2 data3 data4
首先，您不应该有行的重复ID。 对于页面上的每个元素，ID应该是唯一的。
此外，您不必使用each ，因为jQuery会自动将slideToggle函数应用于选择器匹配的每个元素。 我建议删除ID并使用类名：
$("tr.header").click(function () { $("tr.child").slideToggle("fast"); });
如果您想确保只有某些表可以执行此切换function，请在表上放置一个类并更新您的选择器：
Cat1 Row Collapsible Row --- $(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });
回复编辑：
罗里的回答是正确的，我只是在扩展它。 如果使用多个表，则可以从行中的
删除CSS类，并将表简化为：
Cat1 Cat1 Collapsible Row
Cat2 Cat2 Collapsible Row
和jQuery到：
$(".collapsible tr:first").click(function () { $(this).nextAll().slideToggle("fast"); });
这是fadeToggle处理多层次层次结构的答案的扩展，我更喜欢fadeToggle to slideToggle （至少在FF v24中）当你的表中有数百行时， slideToggle什么都不做，然后所有的行突然消失 – 这让你想知道你是否真的点击了这一行。 fadeToggle立即开始淡化行，让你知道正在发生的事情。
而不是child类我使用直接父级的id ，然后您可以递归地遍历每个分支。 还有一个’折叠’类，我用它来修复当有一个已经折叠的子行时折叠父行的错误。
请参阅以下代码的JSFiddle ：
Cat1 Row data1 data2 Cat1a Row data1 data2 data3 data4 Cat2 Row data1 data2
不应该更像这样吗？ 我的意思是，这通常是整个文件。
$("tr#cat1.header").click(function () { $("tr#cat1.child").slideToggle("fast"); });