javascript 如何保存折叠子行的状态(JS)

hpcdzsge  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(166)

我正在尝试为一个项目制作一个可折叠的表格,到目前为止,我做得相当成功。我只遇到了一个问题,我不知道如何处理:实际上,我的可折叠行(具有子行的行)正在折叠,但如果我折叠一个子行,然后折叠父行,然后展开父行,子行也会展开。如何保存子行的状态,以便在展开父行时它们不会展开?
第一个
Here's the fiddle

bttbmeg0

bttbmeg01#

如果我没理解错您的问题,您希望能够打开“父级”而不打开其子级
但是,为什么要编写这样的代码呢?
只见罪魁祸首在暗语中怒吼道:

var children = getChildren($(this).parent('.parent'));
        $.each(children, function() {
            if(action == "show") {
                /* HERE : This line only purpose is to display the children when a parent is displayed */
                $(this).removeClass('collapsed').show(); // <-- DELETE THIS
            } else {
                $(this).addClass('collapsed').hide();
                if($(this).children('.colex').text() == '+') { // Replace possible '+' by a '-' when parent's collapsed //
                    $(this).children('.colex').text('-');
                }
            }
        });

**EDIT:**由于您得要求已更改,您需要检查您得逻辑.

我们知道:

  • 只有父级可以折叠
  • 打开父级时,应仅显示其直接子级和以前未隐藏的子级

要实现此行为,我们需要区分折叠的父级和隐藏的子级
查看代码中的更改:

var level = $(this).parent('.parent').attr('data-level');
var children = getChildren($(this).parent('.parent'));
$.each(children, function() {
    if(action == "show") {              
        if ($(this).attr('data-level')==parseInt(level)+1 
        || $(this).hasClass('hidden')===false) {
            /* un-hide direct children, and not hidden sub-children */
            $(this).removeClass('hidden').show();
      }
    } else {            
        if ($(this).attr('data-level')==parseInt(level)+1) {
                /* apply hidden to direct children */
                $(this).addClass('hidden');
        }
        /* hide all children */
        $(this).hide();
    }
});

如果你想测试的话,我用新代码编辑了你的Fiddle
我还用一行代码替换了多个if语句:

$(cells).parent().addClass('Titre_'+cells[2].innerHTML);

相关问题