Javascript APEX：如何在显示/隐藏项目时自动调整项目宽度？

我正在Oracle APEX中构建一个应用程序，我遇到了一个设计问题

我有一个区域，一行有十几架航天飞机，根据在另一个下拉列表项中所做的选择，我需要在任何给定的时间只显示其中的2或3架

为了演示问题并进行测试，我构建了一个全新的空页面进行测试。
在这个页面上，我创建了一个选择列表项，它返回要显示的航天飞机的数量

然后我创建了动态动作，只显示选定的穿梭机数量，并隐藏其余的。
因此，当用户将选择更改为较小的数字时，一些穿梭程序应该隐藏在浏览器中，而无需提交或刷新页面

动态动作效果很好，可以按预期隐藏航天飞机。
但是，航天飞机不会扩展以填充行

这是一个主要问题，因为航天飞机需要更多的水平空间才能使用。
当我隐藏额外的穿梭机时，我需要剩余的穿梭机扩展并填充行中的水平空间

所有穿梭机均配置有

自动
立柱和立柱跨度选项


当我隐藏大多数其他穿梭机时，如何使穿梭机扩展以填充行中的水平空间？

我可以使用JavaScript动态操作重新呈现项目吗？
我不知道一种简单的方法，但您可以尝试以下方法：

apex模板分为12个部分，因此每个项的列范围在其div容器中定义为一个css类。您只需更改要展开的项的类

您可以使用的类是从
col-1
到
col-12

您应该在动态操作中使用的javascript应该是类似的：

$( "#P_ITEM" ).parent().removeClass( "col-2" );
$( "#P_ITEM" ).parent().addClass( "col-6" );

这是项目所在的html示例：

我不知道一个简单的方法，但你可以试试这个：

apex模板分为12个部分，因此每个项的列范围在其div容器中定义为一个css类。您只需更改要展开的项的类

您可以使用的类是从
col-1
到
col-12

您应该在动态操作中使用的javascript应该是类似的：

$( "#P_ITEM" ).parent().removeClass( "col-2" );
$( "#P_ITEM" ).parent().addClass( "col-6" );

这是项目所在的html示例：

非常有趣！让我修补一下，看看会发生什么。非常有趣！让我修补一下，看看会发生什么。