小编Luk*_*kas的帖子

jQuery展开/折叠分层表行

我正在寻找一种使用jQuery扩展/折叠分层表行的有效方法.问题是,扩展和折叠功能不同.

  • 最初,只level_0显示具有类的行,所有其他行都被隐藏.
  • expand应该只显示下一个级别,因此单击行id=10应该只显示带有id=11id=14可见的行.
  • 另一方面,崩溃应该折叠比当前行更深的所有连续行.例如,单击行上的折叠id=10应隐藏具有id的行11, 12, 13, 14(如果它们可见).

表数据如下所示:

<table id="mytable">
    <tr class="level_0" id="10">...</td>
    <tr class="level_1 parent_10" id="11">...</td>
    <tr class="level_2 parent_11" id="12">...</td>
    <tr class="level_2 parent_11" id="13">...</td>
    <tr class="level_1 parent_10" id="14">...</td>
    <tr class="level_0" id="15">...</td>
</table>
Run Code Online (Sandbox Code Playgroud)

我的非工作解决方案:

$('#mytable tr').live('click', function() {
  var toggleClass = 'parent_' + $(this).attr('id');
  $(this).nextAll('tr').each(function() {
    if ($(this).is('.'+toggleClass)) {
      $(this).toggleClass("showme");
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

问题是,它只会折叠下一级行.仍显示点击行下方的可见和更深级别的行.


任何人都可以给我一些提示,告诉我如何以有效的方式做到这一点?如果需要,可以调整HTML代码.

谢谢你的任何提示.

javascript jquery expand

6
推荐指数
1
解决办法
5842
查看次数

标签 统计

expand ×1

javascript ×1

jquery ×1