Toggle navigation
首页
热门资讯
资源下载
技术博客
会员
中心
会员中心
发布博文
发布资源
首页
文章中心
JavaScript
实用的多级树形展开菜单效果代码
156 阅读
0 评论
103 点赞
我是
靠谱客
的博主
柔弱冰棍
,这篇文章主要介绍
实用的多级树形展开菜单效果代码
,现在分享给大家,希望可以做个参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的多级树形展开菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;} ul,li,{margin:0;padding:0;} ul{list-style:none;} #root{margin:10px;width:200px;overflow:hidden;} #root li{line-height:25px;} #root .rem{padding-left:16px;} #root .add{background:url(/upload/201010/20101031213041133.gif) -4px -31px no-repeat;} #root .ren{background:url(/upload/201010/20101031213041133.gif) -4px -7px no-repeat;} #root li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());} #root li input{vertical-align:middle;margin-left:5px;} #root .two{padding-left:20px;display:none;} </style> </head> <body> <ul id="root"> <li> <label>校讯通</label> <ul class="two"> <li> <label>沈阳市</label> <ul class="two"> <li> <label><input type="checkbox" value="123456">二小</label> <ul class="two"> <li><label><input type="checkbox" value="123456">二年级</label></li> <li> <label><input type="checkbox" value="123456">三年级</label> <ul class="two"> <li> <label><input type="checkbox" value="123456">一班</label> <ul class="two"> <li><label><input type="checkbox" value="123456">张三</label></li> <li><label><input type="checkbox" value="123456">王五</label></li> </ul> </li> <li><label><input type="checkbox" value="123456">实验班</label></li> </ul> </li> </ul> </li> </ul> </li> <li> <label>抚顺市</label> <ul class="two"> <li><label><input type="checkbox" value="123456">二小</label></li> <li><label><input type="checkbox" value="123456">一中</label></li> </ul> </li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
最后
以上就是
柔弱冰棍
最近收集整理的关于
实用的多级树形展开菜单效果代码
的全部内容,更多相关
实用
内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(
103
)
本文分类:
JavaScript
浏览次数:
156
次浏览
发布日期:2022-04-10 16:43:01
本文链接:
https://www.kaopuke.com/article/k-p-k_14_u_7_o_14_f1_12__23__6_w.html
相关文章
php递归函数怎么用才有效
主板电容鼓包的真正原因
面对现在的百度 我们新手基础优化该怎么做?
使用U盘给Win7/Win8系统加速的可行性分析
实用的多级树形展开菜单效果代码
PS利用图层样式快速制作高亮的火焰线条字
js实现网页自动刷新可制作节日倒计时效果
JSON两种结构之对象和数组的理解
评论列表
共有
0
条评论
发表评论
取消回复
登录
注册新账号
立即
投稿
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将本文分享至朋友圈。
返回
顶部
发表评论 取消回复