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

时间：2021-05-26

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="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> <style type="text/css"> .downpanel .layui-select-title span { line-height: 38px; } .downpanel dl dd:hover { background-color: inherit; } </style> <style type="text/css"> body { height: 100%; width: 100%; background-size: cover; margin: 0 auto; } td { font-size: 12px !important; } .layui-form-checkbox span { height: 30px; } .layui-field-title { border-top: 1px solid white; } table { width: 100% !important; } </style></head><body><form 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 downpanel"> <div class="layui-select-title"> <span class="layui-input layui-unselect" id="treeclass">选择栏目</span> <input type="hidden" name="selectID" value="0"> <i class="layui-edge"></i> </div> <dl class="layui-anim layui-anim-upbit"> <dd> <ul id="classtree"></ul> </dd> </dl> </div> </div> </div></form><script src="static/layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script type="text/javascript"> layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () { var $ = layui.jquery, tree = layui.tree; tree({ elem: "#classtree" , nodes: [{ name: '常用文件夹', id: 1, alias: 'changyong', children: [{name: '所有未读', id: 11, href: 'http:///', alias: 'weidu'}, { 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}] }] }] , click: function (node) { var $select = $($(this)[0].elem).parents(".layui-form-select"); $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id); } }); $(".downpanel").on("click", ".layui-select-title", function (e) { $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected"); $(this).parents(".downpanel").toggleClass("layui-form-selected"); layui.stope(e); }).on("click", "dl i", function (e) { layui.stope(e); }); $(document).on("click", function (e) { $(".layui-form-select").removeClass("layui-form-selected"); }); });</script></body></html></body></html>

以上这篇Layui tree 下拉菜单树的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章