与CSS和HTML的垂直树 [英] Vertical Tree with CSS and HTML

问题描述

我试图用HTML和CSS绘制一个垂直的树状结构。我已经在一定程度上做到了。

I Am trying to draw a vertical tree like structure with HTML and CSS. I have done it to some extent.

小提琴

Fiddle

<!--
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>

在我的例子中，一个节点最多可以有两个子节点，我有它的工作的第一个子节点。在第二个孩子的情况下，我没有得到垂直线100％（直到其父节点）。

In my case, a node can have maximum 2 childs, not more than that. I have got it working for the first child node. In case of second child, am not getting the vertical line to 100%(till its parent node).

我尝试做一些调整，但没有一个工作。我可以更改为我的CSS，所以它会得到所有的节点连接，看起来像一棵树？

I have tried doing some tweaks but none of them worked. What could I change to my CSS, so it will get all the nodes connected and looks like a tree?

是否可以做CSS本身？或者可以添加一些javascript？

Is it possible to do with CSS itself? or is it possible to by adding some javascript?

推荐答案

如果你有一套有限的可能性， ，你可以做的一件事是为你的：添加不同顶部和 height 伪元素，并在您的HTML中将类应用到 li 元素，取决于每个需要。例如：

If you have a limited set of possibilities and not looking for something very dynamic, one thing you could do is add classes with different top and height for your :after pseudo element and apply classes in your html to you li elements depending on what each need. Something like that for example:

.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 。因此，：之后的动态解决方案不会是我认为最好的方法。

Handling :after pseudo-elements dynamically isn't so easy (at least not for me...). There's not really a way to handle them directly, you have to go through their actual element, and even then you need to work with CSS. So a dynamic solution with :after wouldn't be the best approach I think.

span ，并使用 jQuery 。这给你一个相对较小和容易的解决方案。首先，为每个元素添加一个span：

But you could replace them with span, and work with jQuery. This gives you a relatively small and easy solution. First, add a span to each a element:

<li><a href="#">Child</a> <span></span>    
<li><a href="#">Grand Child</a><span></span>

然后，在您的CSS替换：之后使用> span：

Then, in your CSS replace :after with > span:

.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;
}

然后你遍历这些 code>并根据父项设置 height 和 top ：

And you go through each of these span and make some calculations to set height and top depending on the parent:

$('.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 可以节省很多时间的情况。

The equivalent solution in plain javascript would be much longer, I think it's the kind of situation where jQuery can save a lot of time.

这篇关于与CSS和HTML的垂直树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！