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

最新推荐文章于 2024-08-02 11:01:26 发布

DaraLyn

最新推荐文章于 2024-08-02 11:01:26 发布

阅读量1.8w

点赞数 1

分类专栏： html5 文章标签： html css jquery 选择树树形菜单

本文链接：https://blog.csdn.net/listmana/article/details/52423345

版权

该博客分享了如何仅用jQuery和CSS实现HTML选择树或树形菜单的步骤，无需额外插件。通过调整<li>标签的样式，可以轻松创建简洁的树形结构。虽然示例中未涉及JavaScript交互，但提到了如果需要获取数据或类似功能，可以根据需求添加。

摘要由CSDN通过智能技术生成

本文将介绍利用jquery+css实现html选择树或树形菜单的方法，无需其他插件，十分简洁明了。

主要利用<li>标签加上样式调整。

先上效果图：

下面上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