如何在鼠標上打開primefaces selectOneMenu

Question

我已經實現了一個來自primefaces的selectOneMenu，並且所有工作都如我應該單擊打開時那樣工作。

<p:selectOneMenu id="dropdownMenu" value="#{viewBean.selectedItem}" styleClass="dropdown"> 
    <p:ajax listener="#{controllerBean.onSelectedItemChanged}" /> 
    <f:selectItem itemLabel="Item A" itemValue="A" /> 
    <f:selectItem itemLabel="Item B" itemValue="B" /> 
    <f:selectItem itemLabel="Item C" itemValue="C" /> 
</p:selectOneMenu> 

但我想要的是打開它時，鼠標光標在它上面，並關閉時，它離開。

我試着實現了mouseenter和mouseleave的功能，並用它們來點擊下拉菜單，但沒有成功。

$('.dropdown').mouseenter(function(event) { 
    console.log("IN dropdown"); 
    $(this).click(); 
}); 
$('.dropdown').mouseleave(function(event) { 
    console.log("OUT dropdown"); 
    $(this).click(); 
}); 

該消息被打印在控制檯上，所以檢測到該事件，並且也檢測到點擊，因爲我自己也嘗試印刷事情發生的時候，但下拉列表將不會編程方式打開。

UPDATE

更改爲下拉列表內的觸發click事件使這個啓閉正常。

$('.dropdown').mouseenter(function(event) { 
    console.log("IN dropdown"); 
    $('.ui-selectonemenu-trigger',this).click(); 
}); 
$('.dropdown').mouseleave(function(event) { 
    console.log("OUT dropdown"); 
    $('.ui-selectonemenu-trigger',this).click(); 
}); 

現在的問題是，當我移動鼠標來選擇一個選項時，由於鼠標離開下拉區域，菜單被關閉。

關於如何使這項工作的任何想法？

我錯過了什麼嗎？

Answer 1

聲明你的選擇菜單

<p:selectOneMenu id="dropdownMenu" value="#{viewBean.selectedItem}" styleClass="dropdown" widgetvar="selectTest"> 

，並使用下面的JavaScript

$('.dropdown').mouseenter(function(event) { 
    PF('selectTest').show(); 
}); 


$('.dropdown').mouseleave(function(event) { 
    var $target = $(event.toElement || event.relatedTarget); 
    if(!($target.hasClass("ui-selectonemenu-items") || $target.hasClass("ui-selectonemenu-panel"))){ 
     PF('selectTest').hide(); 
    } 

}); 

$('.ui-selectonemenu-items-wrapper').mouseleave(function(event) { 
    PF('selectTest').hide(); 
});