html选择树形菜单代码,jquery+css实现html选择树或树形菜单

标签加上样式调整。

先上效果图：

下面上CSS代码：

li{

position:relative !important;

}

li input {

position:absolute;left:0;margin-left:0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;

}

input + ol {

display:none;

background:url('../myImg/toggle.png') 0px 0px no-repeat;

margin:-1em 0 0 0;

display:block;

padding:1em 0 0 1em;

background-size:.8em .8em;

}

input + ol > li {

height:0;overflow:hidden;padding-left:1px;

}

li label,a {

cursor:pointer;display:block;padding-left:1.3em;

}

input:checked + ol {

background:url('../myImg/toggled.png') 0px 0px no-repeat;

display:block;

background-size:.8em .8em;

}

input:checked + ol > li {

height:auto;

}

然后是html代码，贴1-1级菜单示范，剩余的各位可自行扩展。标签内的是叶节点。

嗯，就是这么简单~ 无需js加持~ 当然点击要获取数据之类的还是要根据需要添加啦。