Jquery 如何显示/隐藏下拉式检查列表'；集装箱

我正在尝试修改以显示它的放置容器。我看到源代码中有一个方法，但我不确定如何使用它。我在一个隐藏的div中使用它，它显示在鼠标上方。所以我想同时显示drop container

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

---

有趣的是，作者提供了一个

close

方法来显式关闭下拉列表，而不是

open

方法。您可以轻松地扩展插件以包括

open

方法：

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

您可以调用

$（'#downdrop'）.dropdowncillick（'open'）

来显式打开下拉菜单。因此，对于exmaple，如果要在

mouseover

/

mouseenter

事件中打开它，可以执行以下操作：

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

标记的元素在原始ID前面有一个带有

ddcl-

的ID

请参见此操作：