我遇到的问题是在第二级,当第三级子级有一个父级时,第二级上它之后的任何内容都不会出现,因为它获得“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
- 页面
- 页面未显示
- 页面
- 父页面
- 页面
- 页面
最佳答案
您打开子级的函数仅在确切级别上迭代元素。这意味着它会达到您的 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/
关于javascript - jQuery 展开/折叠表格行在展开时不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36719680/