主从式模块化Toggle面板：如何让主按钮仅关闭已开启的分段

第一步：修复原有代码笔误 #

你现有代码中segTwo函数存在笔误，将seg2 = false错写为seg12 = false，会导致逻辑异常和全局变量污染，先修正该问题：

function segTwo() {
    if (seg2 == true) {
        seg2 = false; // 修正此处笔误
        //do close panel  seg 2
    } else {
        seg2 = true;
        //do open panel  seg 2
    }
}

第二步：调整主按钮逻辑（最小改动方案） #

不需要修改原有分段切换逻辑，仅修改opencloseAll函数，仅对当前处于打开状态的分段执行切换操作（会将其关闭），已关闭的分段不做处理：

function opencloseAll() {
    // 仅状态为true（打开）的分段才执行切换，将其关闭
    if (seg1) segOne();
    if (seg2) segTwo();
    if (seg3) segThree();
}

优化方案（更易维护的模块化实现） #

如果后续需要新增分段，建议将分段配置统一管理，避免重复编写逻辑：

// 统一管理所有分段配置，新增分段仅需在此添加配置项
const segments = [
  {
    status: true,
    btn: seg1Btn,
    onClose: () => {/* 原seg1关闭逻辑 */},
    onOpen: () => {/* 原seg1打开逻辑 */}
  },
  {
    status: true,
    btn: seg2Btn,
    onClose: () => {/* 原seg2关闭逻辑 */},
    onOpen: () => {/* 原seg2打开逻辑 */}
  },
  {
    status: true,
    btn: seg3Btn,
    onClose: () => {/* 原seg3关闭逻辑 */},
    onOpen: () => {/* 原seg3打开逻辑 */}
  }
]

// 通用分段切换逻辑
function toggleSegment(index) {
  const targetSeg = segments[index];
  if (targetSeg.status) {
    targetSeg.status = false;
    targetSeg.onClose();
  } else {
    targetSeg.status = true;
    targetSeg.onOpen();
  }
}

// 批量绑定单分段按钮事件
segments.forEach((seg, idx) => {
  seg.btn.addEventListener('click', () => toggleSegment(idx));
})

// 主按钮逻辑：关闭所有已打开的分段
function closeAllOpenedSegments() {
  segments.forEach((seg, idx) => {
    if (seg.status) toggleSegment(idx);
  })
}

masterBtn.addEventListener('click', closeAllOpenedSegments);

内容的提问来源于stack exchange，提问作者Ilyanta Nowa Siregar