Oracle Apex 22.x：如何禁用窄屏时左侧导航菜单自动隐藏？

核心思路 #

要彻底禁用窄屏时的自动折叠逻辑，需从三个关键环节入手：移除窗口尺寸变化的自动折叠监听、取消点击菜单项的自动收起行为、保留右上角按钮的手动切换功能，同时修复二级菜单的显示异常。

具体实现代码 #

将以下代码添加到应用级JavaScript文件或**页面级的「Function and Global Variable Declaration」**中：

// 等待Apex框架初始化完成后执行
$(window).on('apexready', function() {
    // 1. 移除Apex自带的窗口resize导航折叠监听
    const resizeHandler = $(window).data('events')?.resize?.filter(fn => fn.namespace === 'apexNavigation')[0];
    if (resizeHandler) {
        $(window).off('resize.apexNavigation', resizeHandler.handler);
    }

    // 2. 取消点击菜单项时的自动折叠行为
    $(document).off('click', '.t-NavigationBar-item a', apex.navigation.toggleNavigation);
    
    // 3. 确保页面加载时导航处于展开状态（可根据需求注释）
    if ($('.t-PageBody').hasClass('js-navCollapsed')) {
        apex.navigation.toggleNavigation();
    }

    // 4. 修复二级菜单点击问题（阻止父菜单折叠）
    $(document).on('click', '.t-NavigationBar-item.has-children > a', function(e) {
        e.stopPropagation();
        // 手动切换二级菜单展开/收起
        $(this).closest('.t-NavigationBar-item').toggleClass('is-expanded');
    });
});

代码说明 #

• apexready事件：确保在Apex所有组件加载完成后执行，避免操作未初始化的DOM元素
• 移除resize监听：精准清除Apex内置的resize.apexNavigation事件，这是窄屏自动折叠的核心触发源
• 取消菜单项折叠：移除Apex绑定的apex.navigation.toggleNavigation回调，避免点击菜单项时自动收起导航
• 二级菜单修复：阻止父菜单链接的事件冒泡，手动控制二级菜单的展开/收起，解决原方案中二级菜单无法显示的问题
• 初始展开控制：可选逻辑，确保页面加载时导航默认展开，可根据需求注释

额外注意事项 #

• 若使用自定义主题，需检查并调整选择器（如.t-NavigationBar-item可能有不同类名）
• 测试时覆盖多种窄屏尺寸，确保导航仅通过右上角按钮切换显示状态
• 需移除之前的临时解决方案代码，避免逻辑冲突

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