如何编写按钮点击脚本，实现打开自身分区时自动关闭其余已展开分区

修改方案 #

第一步：调整按钮调用逻辑 #

给每个按钮的点击事件传入对应控制的分区ID，示例如下（替换为你自己的分区ID和按钮文案即可）：

<!-- A按钮对应A分区 -->
<button onclick="myFunction_gsm('men-sizing')">Men</button>
<!-- B按钮对应B分区 -->
<button onclick="myFunction_gsm('women-sizing')">Women</button>
<!-- C按钮对应C分区 -->
<button onclick="myFunction_gsm('kids-sizing')">Kids</button>

第二步：修改原有脚本 #

在原有函数基础上新增全局隐藏逻辑，保留你原来的切换逻辑，修改后代码如下：

<script>
//Gender Selection Script//
    function myFunction_gsm(targetId) {
      // 这里替换为你自己的三个同类分区的实际ID
      const allSections = ['men-sizing', 'women-sizing', 'kids-sizing']
      // 获取当前点击对应分区的显示状态
      const targetEle = document.getElementById(targetId)
      const isTargetShown = targetEle.style.display === "block"

      // 先隐藏所有同类分区
      allSections.forEach(sectionId => {
        document.getElementById(sectionId).style.display = "none"
      })

      // 原有的切换逻辑：如果当前分区原本是隐藏的就显示，原本是显示的就保持隐藏
      if (!isTargetShown) {
        targetEle.style.display = "block"
      }
}
</script>

注意事项 #

• 只需要把allSections数组里的三个ID替换成你实际的A、B、C三个分区的ID即可正常使用
• 保留了你原来点击对应按钮可以切换自身显示/隐藏的逻辑，同时实现了点击其他按钮自动隐藏已展开分区的效果

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