用html+css+js实现一个无限级树形控件
https://blog.csdn.net/cc_fys/article/details/81284638
树形菜单示例：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单示例</title>
<style type="text/css">
ul>li{
list-style: none;
}
/* 可展开*/
.switch-open
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-top-color: black; }
/* 展开完毕*/
.switch-close
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-left-color: black;
margin-bottom: 2px; }
/* 改变CheckBox样式*/
input[type='checkbox']{
width: 20px;
height: 20px; -webkit-appearance:none;
-moz-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 3px;
outline: none;
color:white;
text-align: center;
}
input[type='checkbox']:before
{
content: '√ ';
color:transparent;
}
input[type=checkbox]:checked{
background-color: #30add6;
}
input[type=checkbox]:checked:before{
content: '√';
color:white;
font-weight: bold;
} </style>
</head>
<body>
<div class="warp">
<ul id="container">
</ul>
</div> <script type="text/javascript"> //结构
var json={
'0-0':{
'0-0-0':null,
'0-0-1':{
'0-0-1-0':null,
'0-0-1-1':null,
'0-0-1-2':null
},
'0-0-2':null
},
'0-1':{
'0-1-0':null,
'0-1-1':null
},
'0-2':null
}; //这里生成DOM
function generate(json,par)
{
for(var attr in json)
{
var ele=document.createElement('li');
if(!json[attr])
ele.innerHTML=' <input type="checkbox"></input>'+attr;
else
{
ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
var nextpar=document.createElement('ul');
ele.appendChild(nextpar);
generate(json[attr],nextpar);
}
par.appendChild(ele);
}
}
generate(json,document.getElementById('container')); //处理展开和收起
function toggle(eve)
{
var par=eve.parentNode.nextElementSibling;
if(par.style.display=='none')
{
par.style.display='block';
eve.className='switch-open'; }
else
{
par.style.display='none';
eve.className='switch-close';
}
} //处理全部勾选和全部不选
function checkChange(eve)
{
var oul=eve.parentNode.nextElementSibling;
if(eve.checked)
{
for(var i=;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=true;
}
}
else
{
for(var i=;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=false;
}
}
}
</script> </body>
</html>
实现效果：
用html+css+js实现一个无限级树形控件的更多相关文章
- Web 前端实战：JQ 实现树形控件
前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...
- js树形控件—zTree使用总结
0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...
- js树形控件
js树形控件 ztree http://www.treejs.cn/
- JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- asp.net 树形控件 $.fn.zTree.init
在网页中通过jquery脚本来构筑树形控件将是一个不错的选择,比如有一个文本框,当鼠标点击的时候,像弹出一个下拉框一样弹出一个树形控件,这似乎是一个不错的控制.下面主要讲讲这种树形控件的实现.为了能使 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- jQuery树形控件zTree使用小结
作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...
- Web应用程序开发，基于Ajax技术的JavaScript树形控件
感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...
- jQuery树形控件zTree使用
http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...
随机推荐
- CentOS8 NextCloud 私有云存储搭建
本文首发:https://www.somata.work/2019/CentOS8NextCloudBuild.html 之前发现 Owncloud 越来越捞了,推出了企业版和社区版,近几日突然发现原 ...
- docker 安装elk
https://www.cnblogs.com/fbtop/p/11005469.html
- MyBatis3_[tp_38~]_动态sql_if_判断&OGNL_where标签_
笔记要点出错分析与总结 /** 笔记: * 查询的时候,如果某些条件,没带可能SQL拼装会有问题; * 1.-->给where 后面加上 1=1, 以后的条件都and XXX * 2. < ...
- P1282 多米诺骨牌[可行性01背包]
题目来源:洛谷 题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S1=6+ ...
- OpenSSL和Python实现RSA Key公钥加密私钥解密
基于非对称算法的RSA Key主要有两个用途,数字签名和验证(私钥签名,公钥验证),以及非对称加解密(公钥加密,私钥解密).本文提供一个基于OpenSSL和Python进行非对称加解密的例子. 1. ...
- python练习题（二）
题目: 已知以下几期双色球号码(最后一个数字为蓝球), 2019080 03 06 08 20 24 32 07 2019079 01 03 06 09 19 31 16 2019078 01 17 ...
- Java原子类--AtomicReference
转载请注明出处:http://www.cnblogs.com/skywang12345/p/3514623.html AtomicReference介绍和函数列表 AtomicReference是作用 ...
- [0, 1] 区间内 n 次独立随机事件的一些问题
问题一 证明:一根1米长的绳子,随机切成 $N$ 刀,变成($N+1$)根绳子,则最短的一根绳子长度的期望为 $\displaystyle \frac{1}{(N+1)^2}$. 证: 引理:当分成 ...
- mysql - InnoDB存储引擎 死锁问题（ Deadlock found when trying to get lock; try restarting transaction ）
刚刚向数据库插入数据的时候出现了这么一段错误 Deadlock found when trying to get lock; try restarting transaction 主要原因(由于无法使 ...
- java上传文件夹文件
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...