即使在页面刷新后，如何保留/维护<p：panelMenu>的折叠和展开状态？

Question

假设我有以下简单的<p:panelMenu>。

<p:panelMenu style="width:200px">
    <p:submenu label="Contents">
        <p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>
    <p:separator />
    <p:submenu label="Users">
        <p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>                
</p:panelMenu>

展开

子菜单后，即使页面刷新后，它仍应保持展开状态，直到显式折叠为止。

同样，稍后，如果子菜单折叠，则应保持折叠状态，直到即使在页面重新加载/刷新后显式展开为止。这可能吗？

---

顺便说一下，以下脚本默认展开<p:panelMenu>（全部<p:submenu>）。

$(document).ready(function(){
    $(".ui-panelmenu-content").css("display","block");
    $(".ui-panelmenu-header").addClass("ui-state-active");
    $(".ui-icon-triangle-1-e").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
});

下面的脚本展开了<p:panelMenu>的第一个子菜单，如果它被折叠了。

var isMenuExpanded = jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible');
if(!isMenuExpanded)
{
    jQuery('.ui-panelmenu-panel a').first().click();
}

Answer 1

使用 id 设置每个值项以及点击响应的类

<p:panelMenu id="menu" style="width:200px">
    <p:submenu id="submenu" label="Contents" styleClass="submenu">
        <p:menuitem id="menu1" value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem id="menu2" value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem id="menu3" value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>
</p:panelMenu>

---

将本地存储设置为全局变量（索引）

$(document).ready(function(){
    localStorage.param=Number(0);
});

---

使用本地存储 JavaScript 的变量会话

var param= Number(localStorage.param);

每次页面刷新，获取 localStorage 变量会话以更改菜单状态

$(document).ready(function(){
var e1 = document.getElementById("menu_submenu");
if(Boolean(param)==true){
    e1.style.display="block";
    e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-state-active ui-corner-top";
    e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-s";
}
else{
    e1.style.display="none";
    e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-corner-all";
    e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-e";
}

用于设置本地存储变量会话的 Click 事件

$(document).on("click", ".submenu", function(e) {
var target = e.target || e.srcElement;
while (target && !target.id) {
    target = target.parentNode;
}
if (!(target.id == 'menu1')){
    var n= Number(param)==Number(0)?Number(1):Number(0);
    param=Number(n);
    localStorage.param=Number(n);
   }
});

Answer 2

<p:panelMenu stateful="false"></p:panelMenu>

stateful attruibute 默认值为 true 。如果要手动控制折叠/展开状态，则应将其设置为 false ，然后可以在子菜单元素上使用expanded属性。

Answer 3

存储面板当前状态（打开和关闭）的方法已经很好地涵盖了前面的堆栈溢出问题。