[jQery]为文本框指定下拉弹出层

最新推荐文章于 2021-02-03 17:31:43 发布

原创最新推荐文章于 2021-02-03 17:31:43 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dropdown #function

JavaScript 同时被 2 个专栏收录

15 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细介绍了如何使用jQuery库为网页元素添加动态下拉菜单功能，包括下拉菜单的显示与隐藏、位置调整以及事件绑定等关键步骤。通过实例演示，帮助开发者快速掌握这一实用技巧。

$.fn.appendDropdown = function (dropdown$) {
    dropdown$
            .width(this.innerWidth())
            .mouseleave(function () {
                dropdown$.hide();
            }).css(
                {
                    position: "absolute",
                    top: this.position().top + parseFloat(this.outerHeight()),
                    left: this.position().left
                });

    dropdown$.parent().mouseleave(function () {
        dropdown$.hide();
    });

    this.click(function () {
        dropdown$.show();
    });
}

使用举例：

$('.reftree-ztree-container').each(function () {
        var container$ = $(this);  //下拉框所在的层
        var text$ = container$.prevAll(':text');  //文本框
        text$.appendDropdown(container$);
    })