如何在鼠标悬停时打开素数选择一个菜单

How to open primefaces selectOneMenu on mouse over

本文关键字：选择 菜单 一个 鼠标 悬停      更新时间：2023-09-26

我已经从素数中实现了一个 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();
});

消息打印在控制台中，因此检测到事件，并且还会检测到单击，因为发生这种情况时我也尝试打印一些内容，但下拉列表不会以编程方式打开。

更新

在下拉列表中更改触发器的单击事件可使其正确打开和关闭。

$('.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();
});

现在的问题是，当我移动鼠标选择一个选项时，菜单关闭，因为鼠标离开了下拉区域。

关于如何使其工作的任何想法？

我错过了什么吗？

将选择菜单声明为

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

并使用以下脚本

$('.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();
});
相关文章：