layui多级分类_layui实现下拉分类多级

layui

.downpanel .layui-select-title span {

line-height: 38px;

}

/*继承父类颜色*/

.downpanel dl dd:hover {

background-color: inherit;

}

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;

}

文章栏目

选择栏目

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://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");

});

});