在悬停上打开JQuery UI SelectMenu

Question

我正在使用JQuery selectmenu，并且希望在悬停时打开它并在鼠标离开时将其关闭。

这是我的尝试：

jQuery('.selectbox') 
    .selectmenu() 
    .selectmenu('widget').hover(function() { jQuery(this).selectmenu('open'); }); 

错误：

jquery-1.12.3.min.js:2 Uncaught Error: cannot call methods on 
    selectmenu prior to initialization; attempted to call method 'open' 

但我不能访问selectmenu这种方式来打开它。另外我想我需要保持它打开，当鼠标移动到菜单条目上时？

Answer 1

编辑

原来，这提供了一个不好的用户体验反正，所以请考虑使用此代码:-)

---

我能够创建一个自定义的widget之前功能是这样的：

jQuery.widget("custom.hoverSelectmenu", jQuery.ui.selectmenu, { 
    _create: function() { 
     this._super(); 
     var that = this; 
     this._on(this.button, { 
      mouseenter: function(event) { 
       that.open(); 
      }, 
      mouseleave: function(event) { 
       if (event.toElement != that.menu.get(0)) { 
        that.close(); 
       } 
      } 
     }); 

     this._on(this.menu, { 
      mouseleave: function(event) { 
       if (event.toElement != that.button.get(0)) { 
        that.close(); 
       } 
      } 
     }); 

    } 
}); 

jQuery('.selectbox').hoverSelectmenu({ 

}); 

更新

在Firefox，铬和IE 11下面的作品（低级IE未测试）

_leaveWidget: function(event) { 
    var target = event.toElement || event.relatedTarget || event.target; 
    if (!(
     jQuery.contains(this.button.get(0), target) || 
     jQuery(this.button.get(0)).is(target) || 
     jQuery.contains(this.menu.get(0), target) || 
     jQuery(this.menu.get(0)).is(target) 
    )) { 
     this.close(); 
    } 
}, 

_create: function() { 
    this._super(); 
    var that = this; 
    this._on(this.button, { 
     mouseenter: function (event) { 
      that.open(); 
     }, 
     mouseout: that._leaveWidget 
    }); 

    this._on(this.menu, { 
     mouseout: that._leaveWidget 
    }); 
},