标签：osi .com exp png 菜单 功能 一个 text 分享图片
记录一个功能实现代码，我这边前端用的是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初始化配置代码就不贴了，和正常的写法一样。
标签：osi .com exp png 菜单 功能 一个 text 分享图片
原文地址：https://www.cnblogs.com/Kingram/p/9988082.html
