实现树形结构可以使用CSS选择器和伪元素。下面是详细步骤:
第一步:构建HTML结构
首先,需要构建树形结构的HTML代码。为了方便演示,我们构建一个树形结构,其中包含一个父节点,两个子节点以及一个孙子节点。HTML代码如下:
<ul class="tree">
<li>父节点
<ul>
<li>子节点1
<ul>
<li>孙子节点1</li>
<li>孙子节点2</li>
</ul>
</li>
<li>子节点2</li>
</ul>
</li>
</ul>
第二步:样式设计
接下来,我们需要为每个节点添加CSS样式。首先,我们为父节点添加样式:
.tree {
list-style:none;
padding-left:20px;
}
.tree > li {
position:relative;
}
.tree > li:before {
content:'';
position:absolute;
left:-10px;
top:0;
height:100%;
border-left:1px solid #ccc;
}
.tree > li:first-child:before {
top:16px;
}
由于树形结构是一个有层级关系的结构,因此我们需要使用 padding-left
属性来表示每个节点所处的层级。同时,为了实现节点之间的连线,我们使用 before
伪元素来生成左侧的连线。
现在,我们来为子节点添加样式:
.tree li:before {
content:'';
position:absolute;
left:-10px;
top:0;
height:100%;
border-left:1px solid #ccc;
}
.tree li:last-child:before {
height:16px;
}
.tree li:last-child:after {
height:0;
}
.tree > li > ul > li:before {
height:auto;
top:16px;
bottom:0;
border-left:1px dashed #ccc;
}
.tree > li > ul > li:first-child:before {
top:16px;
}
子节点的样式比较类似,只需要取消 padding-left
,同时 before
伪元素也需要相应地调整。
最后,我们还需要为孙子节点添加样式:
.tree li:last-child:before {
height:auto;
top:16px;
bottom:0;
border-left:1px dashed #ccc;
}
孙子节点的样式同理,只需要稍作调整。这样,我们就完成了树形结构的样式设计。
示例1:折叠展开树形结构
假设我们需要为树形结构添加折叠展开功能,即可以通过点击父节点将子节点收缩或展开。为了实现这一功能,我们可以使用 checkbox
表单元素以及 label
元素。具体代码如下:
<ul class="tree">
<li>
<input type="checkbox" id="node1">
<label for="node1">父节点</label>
<ul>
<li>
<input type="checkbox" id="node2">
<label for="node2">子节点1</label>
<ul>
<li>孙子节点1</li>
<li>孙子节点2</li>
</ul>
</li>
<li>
<input type="checkbox" id="node3">
<label for="node3">子节点2</label>
</li>
</ul>
</li>
</ul>
由于 label
元素与对应的 checkbox
元素关联,因此可以通过点击 label
元素来触发 checkbox
元素的状态变化。同时,由于 checkbox
元素可以被设置为默认选中或未选中的状态,因此可以通过控制它的状态来实现节点的展开和收缩。
接下来,我们需要使用 CSS 样式来实现节点的隐藏和显示。具体代码如下:
.tree li ul {
display:none;
}
.tree input:checked ~ ul {
display:block;
}
由于我们使用了 checkbox
元素来控制节点的展开和收缩,因此我们需要使用 ~
选择器来选取展开状态下的后代节点。这样,当点击父节点时,子节点的 display
属性将从 none
变为 block
,即展开;再次点击时,又会变回 none
,即收缩。
示例2:添加图标等其他装饰
除了上述示例以外,我们还可以为树形结构添加其他的装饰,例如图标、颜色、边框等。在这里,我们以在节点前添加三角形图标为例。具体代码如下:
<ul class="tree">
<li>
<input type="checkbox" id="node1">
<label for="node1">父节点</label>
<ul>
<li>
<input type="checkbox" id="node2">
<label for="node2"><span class="arrow"></span>子节点1</label>
<ul>
<li>孙子节点1</li>
<li>孙子节点2</li>
</ul>
</li>
<li>
<input type="checkbox" id="node3">
<label for="node3"><span class="arrow"></span>子节点2</label>
</li>
</ul>
</li>
</ul>
我们在 label
元素的文本前面添加了一个 span
元素,用来放置三角形图标。接下来,我们需要使用 CSS 样式来绘制图标。具体代码如下:
.tree .arrow {
display:inline-block;
width:0;
height:0;
margin-right:5px;
vertical-align:middle;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid #555;
cursor:pointer;
}
.tree input:checked ~ label > .arrow {
transform:rotate(90deg);
}
我们使用 border
属性来绘制三角形图标,同时使用 transform
属性实现了点击图标时的旋转效果。这样,我们就可以为树形结构添加相应的图标和装饰了。
通过以上步骤,我们成功实现了树形结构的纯CSS实现。当然,还有很多其他的示例可以探索,这里只是其中的两个示例说明。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯css实现树形结构的示例代码 - Python技术站