드롭 다운 목록의 드롭 컨테이너 표시/숨기기 방법

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 이벤트를 열고 자한다면, exmaple를 들어, 다음을 수행 할 수 있습니다 :

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

마크 업 된 요소는 원래 ID 앞에 ddcl-과 ID가 있습니다.

액션보기 : http://jsfiddle.net/william/bq35U/1