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

jQuery Expand/Collapse table row not showing when expanded

本文关键字：显示 展开 折叠 jQuery      更新时间：2023-09-26

我遇到的问题是在第二级，当第三级的子级有一个父级时，它之后的任何东西在第二层都不会出现，因为它得到了一个"display:none"属性而不是块。

创建了一个显示该问题的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
      • 页面
    • 页面未显示
  • 页码
  • 父页
    • 页码
    • 页面

打开子级的函数只在精确级别的元素之间迭代。这意味着它会达到你的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/

相关文章：