在懸停上打開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 
    }); 
},