200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html选择树形菜单代码 jquery+css实现html选择树或树形菜单

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

时间:2023-07-31 22:24:51

相关推荐

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加持~ 当然点击要获取数据之类的还是要根据需要添加啦。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。