如何在鼠标悬停时打开 primefaces selectOneMenu
How to open primefaces selectOneMenu on mouse over
我已经实现了一个来自 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();
});
该消息打印在控制台中,因此检测到事件,并且也检测到点击,因为我也尝试在发生这种情况时打印一些内容,但下拉菜单无法以编程方式打开。
更新
更改下拉列表中触发器的点击事件可使其正确打开和关闭。
$('.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();
});
现在的问题是,当我将鼠标移动到select一个选项时,由于鼠标离开了下拉区域,菜单被关闭了。
关于如何让它工作的任何想法?
我是不是漏掉了什么?
将您的 select 菜单声明为
<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();
});
我已经实现了一个来自 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();
});
该消息打印在控制台中,因此检测到事件,并且也检测到点击,因为我也尝试在发生这种情况时打印一些内容,但下拉菜单无法以编程方式打开。
更新
更改下拉列表中触发器的点击事件可使其正确打开和关闭。
$('.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();
});
现在的问题是,当我将鼠标移动到select一个选项时,由于鼠标离开了下拉区域,菜单被关闭了。
关于如何让它工作的任何想法?
我是不是漏掉了什么?
将您的 select 菜单声明为
<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();
});