树状视图的 CSS 实现，如何使用CSS实现树状视图？
微wx笑
2023-01-15【前端开发】
0
0关键字：
CSS 树状视图
以往，树状视图不只要依靠CSS，还需要脚本以及图片，如今，只需要CSS就可以实现树状视图了。
效果：
html
<ul> <li> Giant planets <ul> <li> Gas giants <ul> <li>Jupiter</li> <li>Saturn</li> </ul> </li> <li> Ice giants <ul> <li>Uranus</li> <li>Neptune</li> </ul> </li> </ul> </li> </ul>
css
.tree{
--spacing : 1.5rem;
--radius : 10px;
}
.tree li{
display : block;
position : relative;
padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul{
margin-left : calc(var(--radius) - var(--spacing));
padding-left : 0;
}
.tree ul li{
border-left : 2px solid #ddd;
}
.tree ul li:last-child{
border-color : transparent;
}
.tree ul li::before{
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / -2);
left : -2px;
width : calc(var(--spacing) + 2px);
height : calc(var(--spacing) + 1px);
border : solid #ddd;
border-width : 0 0 2px 2px;
}
.tree summary{
display : block;
cursor : pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker{
display : none;
}
.tree summary:focus{
outline : none;
}
.tree summary:focus-visible{
outline : 1px dotted #000;
}
.tree li::after,
.tree summary::before{
content : '';
display : block;
position : absolute;
top : calc(var(--spacing) / 2 - var(--radius));
left : calc(var(--spacing) - var(--radius) - 1px);
width : calc(2 * var(--radius));
height : calc(2 * var(--radius));
border-radius : 50%;
background : #ddd;
}
.tree summary::before{
content : '+';
z-index : 1;
background : #696;
color : #fff;
line-height : calc(2 * var(--radius) - 2px);
text-align : center;
}
.tree details[open] > summary::before{
content : '−';
}转自：https://iamkate.com/code/tree-views/
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2023-01-15/1666.html
