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

【问题标题】：Show child nodes and hide parent node on parent node click在父节点上显示子节点并隐藏父节点单击
【发布时间】：2016-02-29 17:47:46
【问题描述】：

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

例子：

我在一个 div 中有一个父节点，

单击“父”节点后，此 div 会刷新并仅显示其子节点（从顶部隐藏/删除父节点），并带有一个按钮以返回上一个父节点显示。

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

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

或

.parent
{
visibility: hidden;
}

但无法达到我想要的。

有什么提示吗？特别是我不确定是否有任何“熟”的开源库可以实现它（因为它与 jQuery 树不同）。我不知道要搜索的关键字（如结构名称）。

任何提示或任何要搜索的关键字将不胜感激！

【问题讨论】：

不可能。隐藏父节点后，所有子节点也将被隐藏。可以这样想：如果隐形人的隐形只是肤浅的（父节点），那么所有的子节点（内脏/血液/骨骼）都是可见的。
那么如果我们忘记树结构怎么办，因为我已经在前端缓存了所有节点，点击父节点后客户端刷新如何？通过节点单击重新渲染 div。 @MarcB
您可以重新调整您的结构，因此您最终会得到一个平行的<parent1 /><child1 /><parent2 /><child2 /> 类型的东西，而不是<parent><child /></parent>。那么如果你隐藏任何“父母”，孩子们不会受到影响。需要迭代和显示/隐藏更多节点，但您至少不必处理隐藏的父/隐藏子问题。

标签： javascript jquery html css asp.net

【解决方案1】：

Marc B 是对的，你不能真正隐藏父母并展示孩子。下一个最好的事情是在真正的父元素下添加一个切换元素。一个简单的例子可能是：

$('.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 完全隐藏了元素，但可以随意更改。

【讨论】：

首先感谢您的回答。这是一个很好的解决方案，但如果我只有两个级别的节点，切换将起作用。其实我需要越来越深。那么如果我们忘记树结构怎么办，因为我已经在前端缓存了所有节点，点击父节点后客户端刷新如何？通过节点单击重新渲染 div。