如何在页面加载之前隐藏可切换的 p:panel?

Posted

技术标签:

【中文标题】如何在页面加载之前隐藏可切换的 p:panel?【英文标题】:How can I hide a togglable p:panel before the page loads? 【发布时间】:2015-10-19 04:45:09 【问题描述】:

我有一个包含 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>

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

【问题讨论】:

【参考方案1】:

只需使用collapsed="true" 作为&lt;p:panel&gt; 的属性。然后它将从一开始就呈现为“关闭”,第一次调用toggle() 将打开它。

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

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

【讨论】:

以上是关于如何在页面加载之前隐藏可切换的 p:panel?的主要内容,如果未能解决你的问题,请参考以下文章

如何在页面加载之前隐藏 CDHTMLDialog?

如何在单页应用程序 (SPA) 的特定页面中隐藏对讲聊天小部件?

页面控制在完全进入下一页之前切换页面

如何在页面加载后启动 Bootstrap 切换按钮,如果打开则不调用回调

前端单页应用以及状态保持的探索

Winforms - 如何在设计器中显示/隐藏元素?