Open JQuery UI SelectMenu On Hover

Question

JQuery selectmenu kullanıyorum ve fareyle üzerine gelmek ve fare çıkarken kapatmak istiyorum.

Bu denedim budur:

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

Hata:

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

Ama selectmenu açmak için bu şekilde erişemez. Ayrıca, fare menü girişleri üzerinde hareket ettiğinde onu açık tutmam gerektiğini düşünüyorum.

Answer 1

Bu yüzden

---

Ben bununla özel bir widget oluşturmak başardı :-) bu kodu kullanmadan önce düşünün lütfen, neyse kötü bir kullanıcı deneyimi sağlar çıktı

düzenlemek böyle işlevsellik:

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

}); 

güncelleme

Firefox, Chrome ve IE 11 aşağıdaki işleri

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