Question

我有一个包含2个组件的JSF页面，一个按钮和面板。该按钮调用jQuery toggle来隐藏和显示面板。我希望当页面加载时，面板最初是隐藏的，这样当我第一次按下按钮时，面板就会显示出来。

<p:commandButton onclick="PF('panelMatches').toggle()" value="Matches" type="button" />
<p:panel id="button_panel" widgetVar="panelMatches" closable="true" toggleable="true">
    Matches: 0
</p:panel>

使用此代码，面板始终最初可见。

Answer 1

仅使用collapsed="true"作为<p:panel>上的属性。然后它将从头开始呈现“关闭”，第一次调用toggle()将打开它。

请参阅您正在使用的primefaces版本的文档：http://www.primefaces.org/documentation.html

Name      | Default | Type    | Description
collapsed | false   | Boolean | Renders a toggleable panel as collapsed.

Answer 2

尝试使用

<p:panel id="button_panel" widgetVar="panelMatches" closable="true" toggleable="true" rendered="#{mybackingbean.showButton}"> Matches: 0 </p:panel>

默认情况下mybackingbean.showButton属性为false。

然后您可以修改commandButton： <p:commandButton actionListener="#{mybackingbean.changeShowButton()}" value="Matches" type="button" update="formId"/>

其中mybackingbean.changeShowButton（）更改为true - ＆gt; false，反之亦然mybackingbean.showButton的值。

最后，formId是这些组件所在表单的formID。

如何在页面加载之前隐藏可切换的p：面板？

2 个答案: