Oracle Apex中能否让Region Display Selector兼具显示与隐藏区域功能？

这个需求完全可行，本质就是给Region Display Selector的元素添加点击切换（toggle）逻辑，实现对应区域显示/隐藏的状态切换，最终达成再次点击后无区域显示的效果。

核心实现思路 #

给每个Selector元素绑定点击事件，通过状态变量记录对应区域的显示状态，执行以下逻辑：

• 初始状态：所有区域处于隐藏状态
• 第一次点击Selector：若对应区域隐藏则显示它；若当前已有其他区域显示，可选择先隐藏其他区域（实现互斥显示）
• 再次点击同一Selector：将已显示的对应区域隐藏，回到无区域显示的状态

具体实现示例 #

原生JavaScript实现

假设Selector元素通过data-region-id属性关联对应区域的ID，区域用.hidden类控制隐藏：

// 遍历所有Selector元素绑定点击事件
document.querySelectorAll('.region-display-selector').forEach(selector => {
  selector.addEventListener('click', function() {
    const targetRegion = document.getElementById(this.dataset.regionId);
    // 可选：互斥显示，先隐藏所有其他区域
    document.querySelectorAll('.region-content').forEach(region => {
      if (region !== targetRegion) region.classList.add('hidden');
    });
    // 切换当前区域的显示/隐藏状态
    targetRegion.classList.toggle('hidden');
  });
});

框架实现（以Vue为例）

通过v-show绑定状态变量，点击时切换状态：

<template>
  <div>
    <button v-for="region in regions" @click="toggleRegion(region.id)">
      {{ region.name }}
    </button>
    <div 
      v-for="region in regions" 
      v-show="activeRegionId === region.id && isVisible"
      class="region-content"
    >
      {{ region.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      regions: [{ id: '1', name: '区域1', content: '区域1内容' }, { id: '2', name: '区域2', content: '区域2内容' }],
      activeRegionId: null,
      isVisible: false
    };
  },
  methods: {
    toggleRegion(id) {
      if (this.activeRegionId === id) {
        this.isVisible = !this.isVisible;
      } else {
        this.activeRegionId = id;
        this.isVisible = true;
      }
    }
  }
};
</script>

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