JavaScript实现点击切换支付选项的互斥排他显示效果

问题根因 #

现有代码中setCup、setUsd两个函数独立控制对应元素的显隐，切换选项时不会主动隐藏其他已展开的同组内容，因此无法实现单选互斥效果。

改造代码 #

无需调整现有HTML结构与CSS样式，仅替换JS逻辑即可，改造后还能消除重复代码，后续新增支付选项也更方便：

// 获取所有支付内容面板节点
const paymentPanels = document.querySelectorAll('#pymntCup, #pymntUsd');

// 通用面板切换逻辑
function switchPaymentPanel(targetId) {
    // 先隐藏所有面板
    paymentPanels.forEach(panel => {
        panel.style.display = 'none';
    });
    const target = document.getElementById(targetId);
    // 保留原有交互：点击已展开的同一项可收起内容
    if (target.style.display === 'block') {
        target.style.display = 'none';
    } else {
        target.style.display = 'block';
    }
}

// 兼容原有HTML上的onclick绑定，无需修改HTML属性
function setCup() {
    switchPaymentPanel('pymntCup');
}
function setUsd() {
    switchPaymentPanel('pymntUsd');
}

实现效果 #

• 切换选项时自动隐藏之前展开的内容，同一时间仅展示一个支付方式的说明
• 保留原有点击同一项可收起内容的交互
• 完全兼容现有代码逻辑，无额外侵入性
• 后续新增支付方式时，仅需新增一行对应面板的调用函数即可，无需重复编写显隐判断逻辑

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