PrimeFaces 7 如何实现子菜单默认折叠且不保留跨页展开状态

异常问题根因 #

• 跨页面导航后子菜单自动展开的本质原因：PrimeFaces 7 版本的p:menu组件默认启用客户端状态持久化机制，会将用户手动展开、折叠子菜单的操作结果存储到浏览器本地存储中，后续所有页面加载时，组件会优先读取本地存储的缓存状态还原菜单交互效果，完全覆盖代码中设置的expanded="false"初始配置。若应用使用AJAX方式实现局部导航，DOM树不会整体刷新，菜单组件的交互状态会直接保留在页面中，进一步加剧状态残留问题。
• 初始渲染闪烁的本质原因：组件默认会将子菜单的所有内容直接渲染到DOM结构中，需要等待绑定的交互JS逻辑执行完成后，才会根据配置把展开的子菜单切换为折叠状态。当页面整体加载耗时较长时，就会先看到展开的子菜单内容，再瞬间切换为折叠状态，形成明显的视觉闪烁。

具体修复操作 #

• 第一步：在p:menu标签上新增stateful="false"属性，彻底关闭菜单的客户端状态持久化能力，让组件每次页面加载时都严格按照代码中定义的初始状态渲染，不会读取用户之前交互留下的缓存状态。配置完成后，整页跳转的场景下不会保留上次的子菜单展开状态，每次进入页面都保持代码中定义的折叠状态。
• 第二步：在母版页的全局样式中新增一条CSS规则，让可折叠菜单下的所有子菜单内容容器默认处于隐藏状态，不需要等待JS执行完成后再做状态切换，从根源上消除加载过程中的视觉闪烁。这条规则只会作用于子菜单的内容区块，不会影响子菜单标题的正常显示，用户依然可以正常点击标题触发展开/折叠操作。

修正后的XHTML代码 #

<p:menu toggleable="true" stateful="false">
      <p:menuitem value="page1" outcome="page1"/>
      <p:menuitem value="page2" outcome="page2"/>
      <p:menuitem value="page3" outcome="page3"/>
      <p:menuitem value="page4" outcome="page4"/>
    
      <p:submenu label="submenu" expanded="false">
            <p:menuitem value="page5" outcome="page5" />
      </p:submenu>
</p:menu>

配套全局CSS代码 #

/* 隐藏可折叠菜单下的子菜单内容容器，消除初始加载闪烁 */
.ui-menu.ui-menu-toggleable .ui-menu-child {
    display: none;
}

补充注意事项 #

• 配置stateful="false"后，组件会自动清除之前版本运行时写入浏览器的旧缓存状态，不需要手动清理本地存储内容。
• 不需要额外编写页面加载完成后的JS逻辑强制折叠子菜单，上述基础配置完成后，整页跳转场景下每次进入任意页面时子菜单都会保持默认折叠状态，用户上一次的展开操作不会被跨页面保留。
• JS交互时的展开/折叠逻辑不受影响，因为PrimeFaces的内置展开逻辑会给展开的子菜单内容容器设置内联display:block样式，内联样式优先级高于全局CSS规则，会正常覆盖隐藏状态显示菜单内容。
• 如果应用使用AJAX方式实现跨页面导航（仅刷新内容区、不重新加载整个页面），需要额外在全局JS中增加导航完成的回调逻辑，强制重置所有菜单的子菜单为折叠状态，避免因为DOM未刷新保留之前的交互状态：

// AJAX导航完成后重置菜单折叠状态
$(document).on('pfajaxsuccess', function() {
    $('.ui-menu.ui-menu-toggleable .ui-menu-child').each(function() {
        $(this).css('display', '');
        $(this).parent().removeClass('ui-menu-parent ui-menu-expanded');
    });
});

内容的提问来源于stack exchange，提问作者JiBi