返回

Oracle APEX 22.x 移动视图侧边菜单自动隐藏功能如何停用？

javascript

停用 Oracle APEX 移动视图中左侧导航菜单的自动隐藏功能

问题

在 Oracle APEX 22.x 中，侧边导航菜单在移动视图中的浏览器窗口较窄时会自动隐藏。对于需要菜单始终可见的应用来说，这可能会造成不便。本文将介绍如何停用此自动隐藏功能，确保即使屏幕较窄，菜单也保持可见。

解决方法

可以通过创建动态操作来停用自动隐藏功能。以下是具体步骤：

  1. 创建动态操作：

    • 名称：ShowLeftNav

    • 事件：页面加载

    • 条件：无

    • 动作：执行 JavaScript 代码

    • JavaScript 代码：

      if ($('.PageBody').hasClass('js-navCollapsed')) {
  $('#t_Button_navControl').click();
}

  2. 将动态操作添加到页面。

  3. 重新加载页面。

其他技巧

除了停用自动隐藏功能外，还可以使用以下技巧进一步自定义菜单行为：

  • 使用媒体查询： 可以在不同屏幕大小下有条件地显示/隐藏菜单，例如：

    @media (max-width: 768px) {
  /* 当屏幕宽度小于 768px 时显示菜单 */
  .PageBody.js-navCollapsed .nav-menu {
    display: block !important;
  }
}

  • 自定义 CSS： 还可以使用自定义 CSS 来调整菜单的外观和行为。例如，可以调整菜单的宽度、颜色和位置。

常见问题解答

  1. 为什么我的菜单在页面加载后仍然隐藏？

    • 确保已将动态操作添加到页面并已触发页面加载事件。

  2. 如何让菜单仅在单击显示/隐藏按钮时隐藏？

    • 可以在动态操作的 JavaScript 代码中添加以下代码行：

      $('#t_Button_navControl').click(function() {
  $(this).toggleClass('nav-menu-hidden');
});

  3. 如何设置菜单在页面加载后自动展开？

    • 可以将以下代码行添加到动态操作的 JavaScript 代码中：

      setTimeout(function() {
  $('#t_Button_navControl').click();
}, 500);

  4. 如何在不使用动态操作的情况下停用自动隐藏功能？

    • 可以将以下 JavaScript 代码粘贴到工作区脚本中：

      $(function() {
  $('.PageBody').removeClass('js-navCollapsed');
});

  5. 如何使用媒体查询有条件地显示/隐藏菜单？

    • 请参阅本文中提供的媒体查询示例。