PrimeFaces分割按钮打开悬停

我使用的是PrimeFaces 5.1，在拆分按钮中单击open menuitem，但我需要相同的拆分按钮需要悬停此选项是可能的还是只有menuBar组件显示此选项

<p:splitButton value="Save" actionListener="#{buttonView.save}" update="messages" icon="ui-icon-disk">
<p:menuitem value="Update" actionListener="#{buttonView.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Delete" actionListener="#{buttonView.delete}" ajax="false" icon="ui-icon-close" />
<p:separator />
<p:menuitem value="Homepage" url="main.xhl" icon="ui-icon-extlink" />
</p:splitButton>

---

这是可能的。在jQuery的帮助下，您可以这样做：

<p:splitButton value="Action" action="#{bean.doMainAction}" widgetVar="itemBtn_#{item.id}" menuStyleClass="hoverOverlay">
    <p:menuitem value="Sub action 1" action="#{bean.doSubAction1}" />
</p:splitButton>
<script type="text/javascript">
    $(window).load(function() {
        PF('itemBtn_#{item.id}').getJQ().on("mouseenter", function() {
            PF('itemBtn_#{item.id}').menu.show();
        });
        PF('itemBtn_#{item.id}').getJQ().on("mouseleave", function() {
            PF('itemBtn_#{item.id}').menu.hide();
        });
    });
</script>

但不要使用它们，因为它们使用的是效果，显示/隐藏覆盖层对它们不起作用，因为效果需要一些时间才能完成

下面的代码用于悬停覆盖菜单（即使在离开拆分按钮本身后也保持其打开）。它通过类hoverOverlay全局绑定到所有覆盖菜单

<script type="text/javascript">
    $(window).load(function() {
        $("body").on("mouseenter", ".hoverOverlay", function() {
            $(this).show();
        });
        $("body").on("mouseleave", ".hoverOverlay", function() {
            $(this).hide();
        });
    });
</script>

$（窗口）。加载（函数（）{
$（“body”）.on（“mouseenter”，“.hoverOverlay”，function（）{
$（this.show（）；
});
$（“body”）.on（“mouseleave”，“.hoverOverlay”，function（）{
$（this.hide（）；
});
});

您可以将其绑定到一个按钮，而无需使用如下自定义hoverOverlay类：

<script type="text/javascript">
    $(window).load(function() {
        PF('itemBtn_#{item.id}').menu.on("mouseenter", ".hoverOverlay", function() {
            PF('itemBtn_#{item.id}').menu.show();
        });
        PF('itemBtn_#{item.id}').menu.on("mouseleave", ".hoverOverlay", function() {
            PF('itemBtn_#{item.id}').menu.hide();
        });
    });
</script>

$（窗口）。加载（函数（）{
PF（'itemBtn.{item.id}'）.menu.on（“mouseenter”，“.hoverOverlay”，function（））{
PF（'itemBtn_35;{item.id}'）。menu.show（）；
});
PF（'itemBtn.{item.id}'）.menu.on（“mouseleave”，“.hoverOverlay”，function（））{
PF（'itemBtn_35;{item.id}'）。menu.hide（）；
});
});

当然，查看组件的javascript源代码，添加一个与单击处理程序类似的悬停事件处理程序

<script type="text/javascript">
    $(window).load(function() {
        PF('itemBtn_#{item.id}').menu.on("mouseenter", ".hoverOverlay", function() {
            PF('itemBtn_#{item.id}').menu.show();
        });
        PF('itemBtn_#{item.id}').menu.on("mouseleave", ".hoverOverlay", function() {
            PF('itemBtn_#{item.id}').menu.hide();
        });
    });
</script>