Öffnen Sie JQuery UI SelectMenu auf Hover

Question

Ich benutze eine JQuery selectmenu, und möchte es bei Hover öffnen und schließen, wenn die Maus verlässt.

Dies ist, was ich versucht:

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

Fehler:

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

aber ich kann die selectmenu nicht auf diese Weise Zugang zu öffnen. Auch ich denke ich müsste es offen halten, wenn sich die Maus über die Menüeinträge bewegt?

Answer 1

bearbeiten

Es ist diese eine sowieso schlechte Benutzererfahrung stellte sich heraus stellt, so beachten Sie bitte, dass vor diesem Code :-)

---

ich in der Lage war, mit, dass ein eigenes Widget zu erstellen Funktionalität wie folgt aus:

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({ 

}); 

Update

Folgende Arbeiten in Firefox, Chrome und IE 11 (untere IE nicht getestet)

_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 
    }); 
},