以下是一个简单的基于jQuery的树形菜单示例。在这个示例中,我们将创建一个具有父子关系的项目列表,并使用jQuery来使其成为可展开和可折叠的树形菜单。
html
.tree{
list-style-type:none;
padding-left:20px;
}
.treeli{
margin:0;
padding:10px0;
position:relative;
.treeli::before{
position:absolute;
top:0;
left:-20px;
border-left:1pxsolid#000;
height:100%;
.treeli.collapsed::before{
border-bottom:1pxsolid#000;
transform:rotate(-90deg);
.treeul{
display:none;
padding:0;
- Child
1.1
1.2
2.1
2.2
$(document).ready(function(){
//添加单击事件以展开/折叠项目
});