基于类别，使用JQuery折叠表格单元格

Question

你好，我有一个菜单的表格结构，需要能够从第二级折叠/展开菜单，以便所有第三级单元格变得可见。我的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>

当我按下二级项目时，如何只折叠/展开我按下的二级项目后面的三级项目？我只想对二级项目执行此操作，而不是一级项目。

- Brian Hvarregaard

---

我建议您使用无序列表而不是表格。以这种方式创建标记，对lvl2 td的任何操作都将打开所有lvl3 td，因为没有层次结构。 - Ben

可以使用<ul>和<li>代替表格吗？ - MDCore

Answer 1

你考虑过使用嵌套列表来制作菜单吗？这不仅可以让任务变得更简单，而且是“更好”的结构(关键词：无表格布局)。

- RoToRa

Answer 2

您可以尝试这个：

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

这有些棘手，因为这将触发所有的level3项目，而不仅仅是单击的level2项目下面的项目。需要以一种方式更改HTML，使level3项目成为level2项目的子孙。

- maček

Answer 3

我建议您使用jQuery树插件。

http://www.jstree.com/

- Kasturi

Answer 4

不确定我是否理解正确，但是尝试查看以下Annimated Collapse插件JQuery。

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

- Elitmiar