基于类的JQuery折叠表单元格

您好，我的菜单有一个表结构，我需要能够从第2级折叠/展开菜单，以便所有第3级单元格都可见。我的HTML如下所示：

<table>
<tr><td class="level1"><a href="abc.html">First Item</a></td></tr>
<tr><td class="level2"><a href="def.html">SecondItem</a></td></tr>
<tr><td class="level3"><a href="ghi.html">Third Item</a></td></tr>
<tr><td class="level3"><a href="jkl.html">Fourth Item</a></td></tr>
<tr><td class="level3"><a href="mno.html">Fifth Item</a></td></tr>
<tr><td class="level2"><a href="pqr.html">Sixth Item</a></td></tr>
<tr><td class="level2"><a href="stu.html">Seventh Item</a></td></tr>
</table>

我怎么做，当我按下level2项目时，我只会在我按下的level2之后折叠/展开level3项目？我只想为level 2而不是level 1执行此操作。

您可以尝试以下操作：

$(".level2").click(function(){
  $(this).siblings('.level3').toggle();
});

---

这有点问题，因为这将触发所有

level3

项目，而不仅仅是单击的

level2

项目下面的项目。HTML需要以

level3

项是

level2

项的后代的方式进行更改。

您考虑过在菜单中使用嵌套列表吗？它不仅使您的任务更简单，而且“更好”的结构（关键字：无表布局）。

我建议您使用jquery树插件

---

我不确定自己是否理解正确，但请尝试查看以下Anniated Collapse插件JQuery

---

我建议您使用无序列表而不是表格。在创建标记的方式中，lvl2 td上的任何操作都将打开所有lvl3 tds，因为没有层次结构。是否可以使用

和

代替表格？