javascript - 将(无序的)HTML 列表显示为自上而下的树的最佳方式是什么？

Question

UL/OL 可以很容易地设计/显示它们的自然流动，即:

• 根
  • 1 级元素 1
  • 1 级元素 2
    • 1.1 级元素 1
    • 1.1 级元素 2
      • 1.1.1 级元素 1
  • 1 级元素 3

等等……

...现在我们有一个特殊的要求，将其显示为一棵树(就像一个可视化的二叉搜索树)，根在顶部，子节点在它下面，依此类推一直到叶子。

有人认为这是一种更好的内容呈现方式(每个 li 最多 50 个字符)。看到自上而下的分解(如根在顶部的树结构)更直观。

所以问题是:将上面的列表内容显示为自上而下的树(而不是按照自然布局从左到右)的最有效方式是什么。

我们不能(也不想)使用图像。用户以类似框的形式输入数据，并在插入点显示(想想 facebook 嵌套列表的类似评论的功能)。有什么方法可以使用 CSS、Javascript/Jquery 将其“转换”为类似树的 View ？ (或者“在我们前进的过程中”创建它？)。深度不能有限制，但横向滚动是可以接受的。

在自然布局 (L-R) 中，我们可以通过缩进、颜色编码和创造性地使用边框可见性来实现 child 的视觉提示。我已经无计可施了，因为我什至能够像仅使用 HTML/CSS + javascript 构造的树一样在视觉上显示它。没有这方面的经验。

任何关于文章/插件使用/现成解决方案等的想法/方向/指针，将不胜感激!

Answer 1

我很确定这就是您要找的:

http://thejit.org/demos/

试试右边中间的 SpaceTree。请注意可用的自定义样式动画，以及根据需要重新排列图形的可能性。总的来说，这是一个非常酷的元素。 :)

要将它与您的列表一起使用，您需要隐藏列表，然后创建一个原生 JS 对象(请注意，它不是 JSON 对象，无论在后面的代码中调用什么变量)并在迭代时填充它在 UL 和 child 身上。但这是非常可行的。