点击input框时，在input框下边展示一个div

最新推荐文章于 2023-06-21 17:40:01 发布

转载最新推荐文章于 2023-06-21 17:40:01 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/charliepan/p/9093200.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一个使用ZTree插件实现的站点选择器。该选择器通过点击文本框触发，展示一个包含站点列表的下拉菜单。菜单采用滚动条进行内容导航，并在失去焦点时自动关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    
//此处在div中的ul是一个ztree树
var html='<div id="'+btnName+'DropDown" style="display: none;position:absolute; height:200px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;z-index: 999999">'+
        '<ul id="'+btnName+'Tree" class="ztree"></ul>'+
        '</div>'
    $("body").append(html);    



    //站点文本框点击事件
    $btn.click(function () {
        var stationObj = $btn;
        var stationOffset = $btn.offset();
        $("#"+btnName+"DropDown").css({left:stationOffset.left + "px", top:stationOffset.top + stationObj.outerHeight() + "px"}).slideDown("fast");
    });



　　//站点选择失去焦点
    $("body").bind("mousedown",
        function(event){
            if (!(event.target.id == btnName || event.target.id == btnName+"DropDown" || $(event.target).parents("#"+btnName+"DropDown").length>0)) {
                $("#"+btnName+"DropDown").fadeOut("fast");
            }
        }
    );