jquery - 如何显示/隐藏下拉检查列表的放置容器

Question

我正在尝试修改 dropdownchecklist显示它的放置容器。我看到源代码中有一个方法，但我不知道如何使用它。我在隐藏的 div 中使用它，并在鼠标悬停时显示它。所以我希望同时显示放置容器。

...
// Shows and hides the drop container
_toggleDropContainer: function() {
    var self = this, dropWrapper = this.dropWrapper, controlWrapper = this.controlWrapper;
    // hides the last shown drop container
    var hide = function() {
        var instance = $.ui.dropdownchecklist.drop;
        if (null != instance) {
            instance.dropWrapper.css({
                top: "-3300px",
                left: "-3300px"
            });
            instance.controlWrapper.find(".ui-dropdownchecklist").toggleClass("ui-dropdownchecklist-active");
            instance.dropWrapper.find("input").attr("tabIndex", -1);
            instance.dropWrapper.drop = false;
            $.ui.dropdownchecklist.drop = null;
            $(document).unbind("click", hide);
            self.sourceSelect.trigger("blur");
        }
    }
    // shows the given drop container instance
    var show = function(instance) {
        if (null != $.ui.dropdownchecklist.drop) {
            hide();
        }
        instance.dropWrapper.css({
            top: instance.controlWrapper.offset().top + instance.controlWrapper.outerHeight() + "px",
            left: instance.controlWrapper.offset().left + "px"
        })
        var ancestorsZIndexes = controlWrapper.parents().map(
            function() {
                var zIndex = $(this).css("z-index");
                return isNaN(zIndex) ? 0 : zIndex}
            ).get();
        var parentZIndex = Math.max.apply(Math, ancestorsZIndexes);
        if (parentZIndex > 0) {
            instance.dropWrapper.css({
                zIndex: (parentZIndex+1)
            })
        }
        instance.controlWrapper.find(".ui-dropdownchecklist").toggleClass("ui-dropdownchecklist-active");
        instance.dropWrapper.find("input").attr("tabIndex", 0);
        instance.dropWrapper.drop = true;
        $.ui.dropdownchecklist.drop = instance;
        $(document).bind("click", hide);
        self.sourceSelect.trigger("focus");
    }
    if (dropWrapper.drop) {
        hide(self);
    } else {
        show(self);
    }
}
...

Answer 1

有趣的是，作者提供了一个 close 方法来显式关闭下拉列表，但没有提供 open 方法。您可以轻松扩展插件以包含 open 方法:

(function($) {
    $.ui.dropdownchecklist.prototype.open = function() {
        this._toggleDropContainer(true);
    }
})(jQuery);

并且您可以调用 $('#downdrop').dropdownchecklist('open') 显式打开下拉菜单。因此，对于 exmaple，如果您想在 mouseover/mouseenter 事件上打开它，您可以执行以下操作:

$('#ddcl-downdrop').mouseenter(function() {
    $("#downdrop").dropdownchecklist('open');
});

标记元素的 ID 在原始 ID 前面带有 ddcl-。

查看实际操作:http://jsfiddle.net/william/bq35U/1 .