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实现一个无限级树形控件的更多相关文章

  1. Web 前端实战：JQ 实现树形控件

    前言 这是一篇个人练习 Web 前端各种常见的控件.组件的实战系列文章.本篇文章将介绍个人通过 JQuery + 无序列表 + CSS 动画完成一个简易的树形控件. 最终实现的效果是: 这样结构比较复 ...

  2. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  3. js树形控件

    js树形控件 ztree http://www.treejs.cn/

  4. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  5. asp.net 树形控件 $.fn.zTree.init

    在网页中通过jquery脚本来构筑树形控件将是一个不错的选择,比如有一个文本框,当鼠标点击的时候,像弹出一个下拉框一样弹出一个树形控件,这似乎是一个不错的控制.下面主要讲讲这种树形控件的实现.为了能使 ...

  6. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  7. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  8. Web应用程序开发，基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  9. jQuery树形控件zTree使用

    http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...

随机推荐

  1. 无法访问此网站 ERR_CONTENT_DECODING_FAILED

    这个错误挺少见的. 百度了下: 1,说是文件编码格式不正确: 2,说是Nginx的压缩和tomcat的压缩冲突了,关闭gzip压缩: 3,……………… 不管是哪一种情况,都是编码问题,所以逐一排查,根 ...

  2. 第一周助教小结——发布作业&线上答疑

    第一周助教小结 助教博客:https://www.cnblogs.com/jason5689/ 本周点评数目:0份 由于发布的作业还未截至,第一次的作业点评还没开始进行,就描述一下评论博客前的感受吧 ...

  3. Deep Module（深模块）

    Deep Module(深模块) 目录 1,模块化设计 2,接口里有什么 3,抽象 4,深模块 5,浅模块 6,Classitis 7,例子 8,结论 正文 类是不是越小越好?最近在读John Ous ...

  4. Eclipse修改项目jdk版本

    修改项目jdk版本(@Override的解决方法) (1)Eclipse的Window-Preferences->Java->Compiler(2)Eclipse的Project-> ...

  5. 【转】oracle的 分表 详解 -----表分区

    转载:https://www.cnblogs.com/congcidaishangjiamianju/p/8045804.html 一 表空间及分区表的概念 表空间: 是一个或多个数据文件的集合,所有 ...

  6. C#经纬度加减运算(度°分′秒″格式)

    经度是分和秒是按60进位,如果要做运算第一步就是转换成浮点数,之后就是计算和还原. using System.Text.RegularExpressions; public static double ...

  7. [hdoj6483][莫队+线段树/ST]

    A Sequence Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  8. datax 从mysql到mysql

    需求:把a服务器上mysql数据迁移到b服务器上mysql中. 1.下载datax:  https://github.com/alibaba/DataX 2.解压tar -zxvf datax.tar ...

  9. 070_Shell 脚本对信号的处理,执行脚本后,按键盘 Ctrl+C 无法终止的脚本

    #!/bin/bash#使用 trap 命令可以拦截用户通过键盘或 kill 命令发送过来的信号#使用 kill -l 可以查看 Linux 系统中所有的信号列表,其中 2 代表 Ctrl+C#tra ...

  10. Linux操作系统常用命令合集——第四篇-文件系统权限操作(5个命令)

    1.umask [命令作用] 文件或目录创建时的遮罩码 [命令语法] umask     [选项]    [参数] [常用选项] -p  --输出的权限掩码可直接作为指令来执行 -s  --以符号方式 ...