求助：如何用JavaScript实现点击不同按钮时自动隐藏已展开区块

要实现「点击新按钮时自动关闭之前打开的区块，同时保留点击原按钮关闭当前区块」的功能，你可以通过统一管理所有区块的方式来修改代码，具体步骤如下：

1. 给所有产品区块添加统一类名 #

先给每个productX元素都加上product-block类，这样能一次性选中所有需要控制的区块：

<div id="product3" class="product-block" style="display:none;">...</div>
<div id="product5" class="product-block" style="display:none;">...</div>
<!-- 另外3个分类区块也按这个格式添加类名 -->

2. 替换零散函数为通用逻辑 #

把原来5个独立的myFunctionX函数合并成一个通用函数，通过参数指定要操作的区块ID，同时修改按钮的调用方式：

<!-- 修改按钮的onclick事件，传入对应区块的ID -->
<button class="zerobut" onclick="toggleProduct('product5')">Open</button>
<button class="healthbut" onclick="toggleProduct('product3')">Open2</button>
<!-- 其他3个按钮同理，传入各自对应的productX ID -->

<script>
function toggleProduct(targetId) {
  // 获取所有产品区块
  const allBlocks = document.querySelectorAll('.product-block');
  // 获取当前要操作的目标区块
  const targetBlock = document.getElementById(targetId);
  // 判断目标区块当前是否显示
  const isTargetShowing = targetBlock.style.display === 'block';

  // 第一步：先隐藏所有区块
  allBlocks.forEach(block => {
    block.style.display = 'none';
  });

  // 第二步：如果目标区块之前是隐藏的，就显示它；如果是显示的，保持隐藏（实现点击原按钮关闭）
  if (!isTargetShowing) {
    targetBlock.style.display = 'block';
  }
}
</script>

逻辑说明 #

• 每次点击按钮时，先统一关闭所有已打开的区块，避免多个区块同时显示
• 保留原需求的交互：点击当前已打开的按钮，会关闭对应的区块
• 减少代码冗余，不用重复写5个几乎一样的函数

可选优化（更规范的写法） #

如果不想用内联onclick，可以用事件委托的方式，让代码更易维护：

<!-- 给所有按钮加统一类名`product-btn`，用data属性存储对应区块ID -->
<button class="zerobut product-btn" data-target="product5">Open</button>
<button class="healthbut product-btn" data-target="product3">Open2</button>

<script>
// 给按钮的父容器绑定事件（假设按钮都在class为btn-container的容器里）
document.querySelector('.btn-container').addEventListener('click', function(e) {
  if (e.target.classList.contains('product-btn')) {
    const targetId = e.target.dataset.target;
    toggleProduct(targetId);
  }
});

// 复用上面的toggleProduct函数
function toggleProduct(targetId) {
  const allBlocks = document.querySelectorAll('.product-block');
  const targetBlock = document.getElementById(targetId);
  const isTargetShowing = targetBlock.style.display === 'block';

  allBlocks.forEach(block => block.style.display = 'none');

  if (!isTargetShowing) {
    targetBlock.style.display = 'block';
  }
}
</script>

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