jsf - 在不单击文本的情况下单击 MenuItem

Question

我有一个菜单，我想点击菜单，但如果你们知道我的意思的话，我不想点击文本。MenuItem 有一个边框或类似的东西，但是当我点击它时它不会重定向到我想要的页面，除非我点击文本。

是否可以单击整个“按钮”并重定向或执行需要执行的操作？

我的菜单是这样的:

<rich:dropDownMenu showDelay="250" hideDelay="0" submitMode="none">
        <f:facet name="label">Tools</f:facet>

        <rich:menuItem>
            <s:link view="/pages/tools/ppaParameters/PpaParametersEdit.xhtml" value="Parameters" id="PpaParametersId" includePageParams="false" propagation="none"/>
        </rich:menuItem>

        <rich:menuGroup value="Security">
            <rich:menuItem>
                <s:link view="/pages/tools/security/ppaModule/PpaModuleEdit.xhtml" value="Module" id="PpaModuleId" includePageParams="false" propagation="none" />
            </rich:menuItem>
        </rich:menuGroup>
</rich:dropDownMenu>

有一个例子。我需要单击文本才能解决问题。

Answer 1

使用以下方式设置菜单项的样式:

display:block;

---

例如，对于使用 h:link 的 rich:menuItem(而不是 s:link，但同样的想法应该适用):

<rich:menuItem immediate="true">
    <h:link value="System" outcome="menu-01" id="menu-01" styleClass="menu-item-link" />
</rich:menuItem>

在 CSS 中，更改菜单项标签类 (.rf-ddm-itm-lbl):

/* Allow clicking anywhere on a menu item, not just the text. */
.rf-ddm-itm-lbl {
    display: block;
}

/* Style the menu to taste. */    
a.menu-item-link {
    color: #333333 !important;
    text-decoration: none !important;
    display: block !important;
}

/* Remove space for icons. */
.rf-ddm-emptyIcon, .rf-ddm-emptyIcon {
    display: none;
}

注意 display: block; 的两个实例。