Question

嗨我的菜单有一个表格结构，我需要能够从level2折叠/展开菜单，以便所有level3单元格可见。我的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项目？我只想为level2做这个，而不是为1级。

Answer 1

您是否考虑过为菜单使用嵌套列表？它不仅使您的工作更轻松，而且是“更好”的结构（关键字：无表格布局）。

Answer 2

你可以试试这个：

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

这有点问题，因为这会触发所有level3个项目，而不仅仅是点击level2项目下面的项目。需要以level3项为level2项的后代的方式更改HTML。

Answer 3

我建议你使用jquery树插件

http://www.jstree.com/

Answer 4

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

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

JQuery基于类折叠表格单元格

4 个答案: