Layui树下拉菜单树的实例代码

1.效果：

2.html代码：

！DOCTYPE html html head meta charset=' utf-8 ' title layui/title meta name=' renderer ' content=' WebKit ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，maximum-scale=1' link rel='样式表href=' static/layui/CSS/layui。CSS ' rel=' external no follow ' media=' all '！-注意：如果你直接复制所有代码到本地，上述钢性铸铁路径需要改成你本地的- style type='text/css ' .唐帕内尔layui-select-title span {行高： 38px} /*继承父类颜色*/.向下面板dl DD :悬停{背景色：继承；}/style style type=' text/CSS ' body { height : 100%；宽度： 100%;背景尺寸：封面；margin : 0 auto } TD { font-size : 12px！重要；} .layui-form-checkbox span { height : 30px；} .layui-field-title {边框-顶部： 1px纯白；}表{ width: 100%！重要；}/style/head dyform class=' layui-form ' div class=' layui-form-item ' label class=' layui-form-label '文章栏目/label div class=' layui-input-inline ' div class=' layui-unselect layui-form-select down panel ' div class=' layui-select-title ' span class=' layui-input layui-unselect ' id=' tree class '选择栏目/span输入类型=' hidden ' name=' selectID ' value=' 0 ' I class=' layui-edge '/I/div dl class=' layui-anim layui-anim-up bit ' DD ul id=' tree '/ul/DD/dl/div/formscript src=' http : static/layui/layui。js ' charset=' utf-8 '/脚本！-注意：如果你直接复制所有代码到本地，上述射流研究…路径需要改成你本地的-脚本类型=' text/JavaScript ' layui。使用([' element '，' tree '，' layer '，' form '，' upload']，function () { var $=layui.jquery，tree=layui.tree树({ elem: '#classtree '，节点：[{ name : '常用文件夹，id: 1，alias: 'changyong '，children: [{name: '所有未读，id: 11，href: 'http://www.layui.com/'，alias: '杜威}，{ name: '置顶邮件，id: 12 }，{name: '标签邮件，id: 13}] }，{ name: '我的邮箱，id: 2，spread: true，children: [{ name: 'QQ邮箱，id: 21，spread: true，children: [{ name: '收件箱，id: 211，children: [{name: '所有未读，id: 2111}，{name: '置顶邮件，id: 2112}，{name: '标签邮件，id: 2113}] }，{name: '已发出的邮件，id: 212}，{name: '垃圾邮件，id: 213}] }，{ name: '阿里云邮，id: 22，children: [{name: '收件箱，id: 221}，{name: '已发出的邮件，id: 222}，{name: '垃圾邮件，id: 223}] }] }]，单击：函数（节点){ var $select=$($(this)[0].elem ).父母('。layui-form-select’)；$ select。移除CLaSS(“layui-form-selected”).查找('。layui-select-title span ').html(node.name).end().find(' input : hidden[name=' selectID ']').val(节点。id)；} });$('.唐帕内尔').打开('点击','。layui-select-title '，函数(e) { $(' .布局-表单-选择').不是($(这个)。父母('。layui-form-select ').移除CLaSS(' layui-form-selected ')；$(这个)。父母('。唐帕内尔').切换类(' layui-form-selected ')；拉威。栈(e)；}).on('click '，' dl i '，function(e){ layui。栈(e)；});$(文档)。打开('点击'，函数(e) { $(').布局-表单-选择').移除CLaSS(' layui-form-selected ')；});});/script/body/html/body/html以上这篇布局树下拉菜单树的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。