在页面加载时自动折叠 PrimeFaces PanelMenu 中的任何项目

Question

我正在编写一个 Primefaces 5.1 portlet。

它包含在一个包含panelMenu 的独特页面中，我需要它从每次用户更改页面（页面加载时）折叠的任何面板开始。

但是，如果我打开一个面板，然后更改页面，它将开始显示该面板仍处于打开状态。

我找不到任何选项来实现这个目标（例如，collapsed=true、ignoreCookie=true 或类似的东西）。

我找到的唯一解决方案是以下 Javascript 代码：

PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);

问题是这段代码将折叠任何打开的面板（因此在页面加载时用户能够看到面板菜单折叠动画）但它似乎没有将此状态存储在其 cookie/localstorage 中......结果是在任何页面加载用户都可以看到这个动画。

我确定它不会保存其状态，因为“解决”问题的唯一方法是手动重新打开并重新折叠面板......然后，在页面更改后，这些菜单开始关闭（并且没有动画）。

我也尝试在崩溃后使用PrimeFaces.widgets.sideMenuPanel.saveState()，但没有成功。

你有什么想法吗？

谢谢...

Answer 1

我找到了解决问题的办法。

如果您阅读了我与 Kukeltje 的讨论（cmets on my question），您会发现最新的 Primefaces 版本可以解决问题。

否则，如果您想避免升级或修改源，并且您需要仅基于 Javascript 的快速修复，请阅读以下部分答案。

它使用 JavaScript 直接作用于组件的状态。

首先你需要有一个对你的组件的变量引用：

<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />

那么你应该在准备好的文档上添加以下JS代码：

                var panelMenu = PrimeFaces.widgets.sidePanelMenu;
                // 1. On page loading collapses possible opened panels
                panelMenu.collapseRootSubmenu(panelMenu.headers);
                // following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
                //clearSidePanelMenuPreferences();
                // 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
                // We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
                panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
                panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});

清除首选项调用的函数如下：

        function clearSidePanelMenuPreferences() {
            var panelMenu = PrimeFaces.widgets.sidePanelMenu;
            panelMenu.expandedNodes = [];   // clear the opened panels lists
            panelMenu.saveState();          // store this information
        }

希望对你有帮助

Answer 2

请检查此代码块

PF('myPanelMenu').headers.each(
                function(){
                    var header = jQuery(this);                     
                          PF('myPanelMenu').collapseRootSubmenu(header);
                          header.removeClass('ui-state-hover');                     
                }
            );

Answer 3

我更喜欢这样做，以便只执行一次此方法并保持菜单选项处于选中状态。

$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
    var panelMenu = PrimeFaces.widgets.sidePanelMenu;

    // 1. On page loading collapses possible opened panels
    panelMenu.collapseRootSubmenu(panelMenu.headers);
    panelMenu.expandedNodes = [];   // clear the opened panels lists
    panelMenu.saveState();
 }   
});