Question

我遇到的问题是在第二级别，当有第三级别的孩子的父母后，在第二级别上的任何内容都没有出现，因为它得到了一个＆＃34;显示：无＆＃34;属性而不是块。

创建了一个显示问题的JSfiddle。

如果您打开第一个父页面，您可以看到父页面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();
});});

简单文本层次结构：

页
家长页面
- 页
- 页
- 家长Page 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/

展开时jQuery展开/折叠表行未显示

1 个答案: