结合树形菜单做下拉菜单树

分享 已结
1 2624
luoye
luoye 2017-12-27
悬赏:20飞吻
页面代码及js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉树</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" type="text/css" href="/Public/lib/layui/src/css/layui.css">
<style type="text/css">
.downpanel .layui-select-title span{
line-height: 38px;
}
.downpanel dl dd:hover{background-color: inherit;}
</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 type="text/javascript" src="/Public/lib/layui/src/layui.js"></script>
<script type="text/javascript">
layui.use(["tree"],function() {
var $=layui.jquery,tree=layui.tree;
tree({
elem:"#classtree"
,nodes:[{name: '常用文件夹',id: 1,alias: 'changyong',children: [{name: '所有未读',id: 11,href: 'http://www.layui.com/',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>
下拉菜单树示意图
选择前

选择某个菜单

查看控制台
回帖
本帖已设置禁止回复