如何在单击主按钮集/数组中的一个按钮时显示一组按钮

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
<button id="button3">按钮3</button>

<div id="buttonGroup1" style="display: none;">
  <button>按钮A</button>
  <button>按钮B</button>
  <button>按钮C</button>
</div>

<div id="buttonGroup2" style="display: none;">
  <button>按钮X</button>
  <button>按钮Y</button>
  <button>按钮Z</button>
</div>

// 获取主按钮集/数组中的按钮元素
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");

// 获取要显示的一组按钮的容器元素
var buttonGroup1 = document.getElementById("buttonGroup1");
var buttonGroup2 = document.getElementById("buttonGroup2");

// 添加点击事件监听器
button1.addEventListener("click", function() {
  // 显示第一组按钮，隐藏其他组按钮
  buttonGroup1.style.display = "block";
  buttonGroup2.style.display = "none";
});

button2.addEventListener("click", function() {
  // 显示第二组按钮，隐藏其他组按钮
  buttonGroup1.style.display = "none";
  buttonGroup2.style.display = "block";
});

button3.addEventListener("click", function() {
  // 隐藏所有组按钮
  buttonGroup1.style.display = "none";
  buttonGroup2.style.display = "none";
});

/* 样式调整示例 */
button {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

div {
  margin-top: 10px;
}

/* 过渡效果示例 */
div {
  transition: opacity 0.5s ease;
}

div.show {
  opacity: 1;
}

div.hide {
  opacity: 0;
}