How to show/hide dropdown check list's drop container

I'm trying to modify dropdownchecklist to show it's drop container. I see there is a method in source code but I'm not sure how to use it. I'm using it inside a div which is hidden and it is shown on mouseover. So I want drop container to be shown meanwhile.

...
// 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);
    }
}
...

Interesting enough, the author provides a close method to explicitly close the dropdown, but not an open method. You can easily extend the plugin to include the open method:

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

And you can call $('#downdrop').dropdownchecklist('open') to explicitly open the dropdown menu. So, for exmaple, if you want to open it on mouseover/mouseenter event, you could do the following:

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

The marked-up element has an ID with ddcl- in front of the original ID.

See this in action: http://jsfiddle.net/william/bq35U/1.