Question

我想要创建的内容与jQuery树非常相似，但是节点不会通过在父节点下折叠和展开来显示，但div将仅显示子节点而不是一起显示父节点和子节点。然后我可以有一个按钮返回再次显示他们的父母。

示例：

我在div中有一个父节点，

一旦我点击＆＃34;父母＆＃34;节点，这个div然后刷新并仅显示其子节点（从顶部隐藏/删除父节点），并带有一个按钮返回上一个父节点显示。

我已经从json文件序列化了层次结构并在前端缓存，并尝试使用以下代码：

document.getElementById('parent').parentNode.style.display='none';

或

.parent
{
visibility: hidden;
}

但无法达到我想要的效果。

任何提示？特别是我不确定是否有任何＆＃34;煮熟的＆＃34;开源库可以实现它（因为它与jQuery树不同）。我不知道要搜索的关键词（比如结构名称）。

任何提示或任何要搜索的关键词都将受到赞赏！

Answer 1

Marc B是对的，你不能真正隐藏父母并向孩子们展示。接下来最好的事情是在真正的父元素下面输入一个toggle元素。一个简单的例子可能是：

$('.parent-toggle').click(function () {
  $(this).closest('.parent').find('.child').show()
  $(this).closest('.parent').find('.parent-toggle').hide()
});

Here's a working example。请注意，visibility: hidden不会删除有问题的父元素占用的空间。我使用display: none来完全隐藏元素，但是可以随意改变。

在父节点上显示子节点并隐藏父节点单击

1 个答案: