ztree - 仿Select 下拉菜单
项目要求实现一个点击登陆框弹出组织部门树点选用户登陆的功能，系统用到了 ztree 来实现组织树，所以需要在登陆框集成这一功能。
ztree - zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree
网页就是个登陆框
<div id="user" class="search layui-form">
<div class="" id="loginText">
<input type="text" id="employeeCode" name="employeeCode" placeholder="用户名" autocomplete="off" />
<div class="ztree" id="ztree" style="display:none">
</div>
</div>
</div>jQuery 控制其 点击弹出，选择或者空白点击收起
$("#employeeCode").focus(function () {
$("#ztree").show(100);
$("#employeeCode").css("margin-bottom", "0px");
$("body").on("mousedown", onBodyDown);
});
function onBodyDown(event) {
if (!(event.target.id == "employeeCode" || event.target.id == "ztree" || $(event.target).parents("#ztree").length > 0)) {
ztreeHide();
}
}
function ztreeHide() {
$("#ztree").hide(100);
$("#employeeCode").css("margin-bottom", "15px");
$("body").off("mousedown", onBodyDown);
}获取焦点，显示ztree，添加事件，点击非 登陆框 和 ztree 的div 则收起，此处参考了官方的 select 案例。
.ztree {
width: 300px;
height: 220px;
background-color: white;
position: absolute;
border: 1px solid #27A9E3;
overflow: auto;
}css 没有什么特殊的，一开始是 不显示的，然后绘制了一个边框。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-12-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读