javascript - jQuery 展开/折叠表格行在展开时不显示

Question

我遇到的问题是在第二级，当第三级子级有一个父级时，第二级上它之后的任何内容都不会出现，因为它获得“display:none”属性而不是 block 。

已创建一个 JSfiddle 显示该问题。

https://jsfiddle.net/du6oy7oy/4/

如果您打开第一个父页面，您可以看到父页面 2，在其标题为“页面未显示”之后还有另一个页面，它与父页面 2 处于同一级别，因此应该显示。

我无法弄清楚是什么原因造成的

JS:

$(document).ready(function() {
function getChildren($row) {
    var children = [], level = $row.attr('data-level');
    while($row.next().attr('data-level') > level) {
         children.push($row.next());
         $row = $row.next();
    }            
    return children;
} 
function getChildrenOpen($row) {
    var children = [], level = $row.attr('data-level');
    level++;
    while($row.next().attr('data-level') == level) {
         children.push($row.next());
         $row = $row.next();
    }            
    return children;
}
$(document).on('click','.closed', function() {
   $(this).removeClass('closed');
    $(this).addClass('parent');
    $(this).find(".fatoggle").removeClass('fa-plus');
    $(this).find(".fatoggle").addClass('fa-minus');
    $(this).find(".btntoggle").removeClass('btn-primary');
    $(this).find(".btntoggle").addClass('btn-danger');
    var children = getChildrenOpen($(this));
    $.each(children, function() {
        $(this).css('display','table-row');
    })
});
$(document).on('click','.parent', function() {
   $(this).removeClass('parent');
    $(this).addClass('closed');
    $(this).find(".fatoggle").addClass('fa-plus');
    $(this).find(".fatoggle").removeClass('fa-minus');
    $(this).find(".btntoggle").addClass('btn-primary');
    $(this).find(".btntoggle").removeClass('btn-danger');
    var children = getChildren($(this));
    $.each(children, function() {
        $(this).css('display','none');
        $(this).removeClass('parent');
        $(this).addClass('closed');
        $(this).find(".fatoggle").addClass('fa-plus');
        $(this).find(".fatoggle").removeClass('fa-minus');
        $(this).find(".btntoggle").addClass('btn-primary');
        $(this).find(".btntoggle").removeClass('btn-danger');
    })
});
$(document).on('click','.parent a, .closed a',function(e) {
 e.stopPropagation();
});});

简单文本层次结构:

• 页面
• 父页面
  • 页面
  • 页面
  • 父页面 2
    • 页面
  • 页面未显示
• 页面
• 父页面
  • 页面
  • 页面

Answer 1

您打开子级的函数仅在确切级别上迭代元素。这意味着它会达到您的 2 级并在达到 1 级之前停止。

function getChildrenOpen($row) {
  var children = [],
    level = $row.attr('data-level');
  level++;
  while ($row.next().attr('data-level') >= level) {
    if ($row.next().attr('data-level') == level) {
      children.push($row.next());
    }
    $row = $row.next();
  }
  return children;
}

JSFiddle: https://jsfiddle.net/du6oy7oy/6/