我试图用
HTML和CSS绘制一个类似于结构的垂直树.我在某种程度上做到了.
<!--
We will create a family tree using just CSS(3)
The markup will be simple nested lists
-->
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li><a href="#">Grand Child</a>
<ul>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Great Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
在我的例子中,一个节点最多可以有2个子节点,不超过这个节点.我让它为第一个子节点工作.在第二个孩子的情况下,我没有得到100％的垂直线(直到其父节点).
我试过做一些调整,但没有一个工作.我可以将什么更改为我的CSS,因此它将连接所有节点并看起来像一棵树？
是否可以使用CSS本身？或者是否可以通过添加一些JavaScript？
解决方法
如果你有一组有限的可能性而不是寻找非常动态的东西,你可以做的一件事是为你的：添加不同顶级和高度的类：在伪元素之后并根据每个需要将你的html中的类应用到你的元素中.像这样的东西例如：
.tree li::after{
content: '';
position: absolute; top: 0;
width: 3%; height: 50px;
right: auto; left: -2.5%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
}
.tree li.two-step::after{
top: -100px;
height: 150px;
}
.tree li.three-step::after{
top: -180px;
height: 230px;
}
https://jsfiddle.net/g2ue3wL5/1/
编辑：
处理：动态伪元素之后并不那么容易(至少不适合我……).实际上没有办法直接处理它们,你必须经历它们的实际元素,即使这样你也需要使用CSS.因此,动态解决方案：以后不是我认为最好的方法.
但是你可以用span替换它们,并使用jQuery.这为您提供了一个相对小而简单的解决方案.首先,为每个元素添加一个span：
<li><a href="#">Child</a> <span></span> <li><a href="#">Grand Child</a><span></span>
然后,在你的CSS替换：之后用>跨度：
.tree li > span {
content:'';
position: absolute;
top: 0;
width: 3%;
height: 50px;
right: auto;
left: -2.5%;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
}
然后,您将遍历每个跨度并进行一些计算以根据父级设置高度和顶部：
$('.tree li > span').each(function () {
var thisNewTop = $(this).closest('ul').offset().top - $(this).offset().top;
var thisNewHeight = $(this).offset().top - $(this).closest('ul').offset().top + 50;
$(this).css({
top: thisNewTop,height: thisNewHeight
});
});
https://jsfiddle.net/g2ue3wL5/3/
普通javascript中的等效解决方案会更长,我认为这是jQuery可以节省大量时间的情况.
