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

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')明确打开的下拉菜单。所以，对于〔实施例，如果你想打开它mouseover/mouseenter事件，你可以做到以下几点：

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

带标记的元件在原有的ID前面加上ddcl-的ID。

看到这个在行动：http://jsfiddle.net/william/bq35U/1。