记录一个功能实现代码，我这边前端用的是layui，需要实现的效果如下：
需求：当点击选择地区的时候会出现如上图的下拉菜单。
分析：首先肯定给这个输入框加监听，click方法，然后将ztree的div显示，这里的重点应该是怎么设计这个ztree使其能够显示在输入框的下面显示。这部分的代码也是在网上找到的。
实现步骤：
①：输入框和ztree的div代码
<div class="layui-input-inline">
<input type="text" name="busArea" id="busArea" lay-verify="required" placeholder="请选择地区" autocomplete="off" class="layui-input">
</div>
<div id="treeDiv" style="position: absolute; display: none; width: 190px; height: 300px; z-index: 9999; background-color: #F7F7F7; overflow: auto">
<ul id="mytree" class="ztree"></ul>
</div>
②：点击事件以及加载ztree的方法（数据是使用ajax从后端调的）
$().ready(function() { var divTree = $("#treeDiv");
$("#busArea").click(function() {
var x = $(this).offset().left + 0;
var y = $(this).offset().top + 40;
divTree.css({
left : x + "px",
top : y + "px"
});
divTree.slideDown("slow");// 滑动方式显示元素
});
divTree.hover(function() {
}, function() {
divTree.slideUp("slow");// 滑动方式隐藏元素
});
GetTree();
});function GetTree() {
$.ajax({
type : "POST",
dataType : "json",
url : "xxxxxxxxxxxxxxxx",
async : false,
success : function(data) {
zTree = $.fn.zTree.init($("#mytree"), setting, data);
//展开所有节点
zTree.expandAll(zTree);
},
error : function(error) {
layer.msg('系统错误！', {
icon : 2,
time : 1500
})
}
});
}ztree初始化配置代码就不贴了，和正常的写法一样。
update at 2018-12-24
此处有个小问题需要优化一下,这里设置的是鼠标离开下拉菜单再进行过隐藏,如果鼠标没进入下拉菜单的话就不会隐藏,这样的用户体验不好,解决方案如下:
1.我们可以给输入框加上onblur失去焦点事件监听(当然这里也可以加上鼠标离开输入框的事件mouseleave()看自己认为哪个更合适)
<input type="text" name="busArea" id="busArea" lay-verify="required" placeholder="请选择地区" autocomplete="off" class="layui-input" onblur="leaveText()">
2.设置全局变量 ifNeedClose 如果鼠标进入下拉选,就把这个变量赋值
var ifNeedClose;
divTree.hover(function() {
// 鼠标在下拉菜单中,不需要关闭菜单
ifNeedClose = false;
}, function() {
// 鼠标离开下拉菜单,需要关闭
ifNeedClose = true;
divTree.slideUp("slow");// 滑动方式隐藏元素
});3.在onblur方法中判断2中设置的变量,根据变量的值判断是否需要隐藏下拉菜单
functtion leaveText() {
// 如果不是不需要关闭,那就关闭菜单
if(ifNeedClose != false) {
divTree.slideUp("slow");
}
}4.这样设置完毕,就可以解决这个问题了.