点击区块切换hidden类及显示/隐藏白色边框的技术问题求助

原代码的核心问题有两个：

1. 改成toggle后，第二次点击时document.querySelectorAll('.block2.hidden')找不到任何元素，无法执行隐藏逻辑；
2. 完全没有处理点击元素的边框选中状态。

下面是实现需求的完整方案：

1. 更新CSS样式 #

添加选中状态的边框样式，同时保留隐藏类：

.hidden {
  display: none;
}
.block2 {
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  /* 基础样式让区块更直观 */
}
.selected {
  border: 2px solid white;
}

2. 重构HTML结构 #

用data属性关联触发元素和目标区块组，避免重复写多个函数：

<!-- Choice 1 触发区块 -->
<div class="block2" data-target-group="group2">
  <p>Main</p>
</div>

<!-- Choice 2 目标区块组 -->
<div class="block2 hidden" data-group="group2" style="background-color:hotpink;">
  <p>Pink</p>
</div>
<div class="block2 hidden" data-group="group2" style="background-color:orange;">
  <p>Orange</p>
</div>

<!-- Choice 3 示例 -->
<div class="block2" data-target-group="group3">
  <p>Choice 3 Trigger</p>
</div>
<div class="block2 hidden" data-group="group3" style="background-color:lightblue;">
  <p>Lightblue</p>
</div>
<div class="block2 hidden" data-group="group3" style="background-color:green;">
  <p>Green</p>
</div>

3. 通用JavaScript逻辑 #

用一个函数处理所有组的切换和选中状态：

// 给所有触发区块绑定点击事件
document.querySelectorAll('[data-target-group]').forEach(trigger => {
  trigger.addEventListener('click', function() {
    const targetGroup = this.dataset.targetGroup;
    
    // 1. 切换目标组所有区块的显示/隐藏
    document.querySelectorAll(`[data-group="${targetGroup}"]`).forEach(block => {
      block.classList.toggle('hidden');
    });
    
    // 2. 切换当前点击区块的选中状态
    this.classList.toggle('selected');
  });
});

可选：单选逻辑（同一时间仅一个区块选中） #

如果需要限制同一时间只有一个触发区块处于选中状态，修改JS如下：

document.querySelectorAll('[data-target-group]').forEach(trigger => {
  trigger.addEventListener('click', function() {
    const targetGroup = this.dataset.targetGroup;
    
    // 切换目标组显示/隐藏
    document.querySelectorAll(`[data-group="${targetGroup}"]`).forEach(block => {
      block.classList.toggle('hidden');
    });
    
    // 移除其他所有触发区块的选中状态
    document.querySelectorAll('[data-target-group].selected').forEach(el => {
      if (el !== this) el.classList.remove('selected');
    });
    
    // 切换当前区块的选中状态
    this.classList.toggle('selected');
  });
});

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