点击时切换+白色边框

Question

我需要当前在单击块时显示隐藏块的功能，以在隐藏类之间切换。此外，当单击一个块时，需要出现白色边框以显示已选择哪个块，并且当再次单击同一块时，白色边框需要消失。当我尝试更改代码以使其切换时，它根本没有切换。我似乎也无法弄清楚每当我想要编写白色边框的代码时，是否需要在已有的函数中添加代码或创建一个新函数以使其工作。有人可以帮我吗？

我尝试在 JavaScript 中将“删除”更改为“切换”，但它没有切换。 我所期待的：当我单击“选项 1”中名为“主”的块时，带有块的行必须显示在“选项 2”中，但是当我再次单击“主”块时，它必须隐藏再次阻塞。 对于“选择 3”和“选择 4”中的其他块也是如此。此外，一旦单击某个块，它必须显示白色边框，再次单击同一块时，白色边框需要消失。

HTML

<div class="block2" onclick="showHiddenBlocks()"><p>Main</p></div>

<div class="block2 hidden" onclick="showHiddenBlocks2()" style="background-color:hotpink;"><p>Pink</p></div>
    <div class="block2 hidden" onclick="showHiddenBlocks3a()" style="background-color:orange;"><p>Orange</p></div>
    <div class="block2 hidden" onclick="showHiddenBlocks4a()" style="background-color:lightblue;"><p>Lightblue</p></div>
    <div class="block2 hidden" onclick="showHiddenBlocks5a()" style="background-color:green;"><p>Green</p></div>
    <div class="block2 hidden" onclick="showHiddenBlocks6a()" style="background-color:blue;"><p> Blue</p></div>

CSS

.hidden {
  display: none;
}

Javascript

function showHiddenBlocks() {
  const hiddenBlocks = document.querySelectorAll('.block2.hidden');
  hiddenBlocks.forEach((block) => {
    block.classList.remove('hidden');

  });
}

其他showHiddenblocks的功能代码是相同的，我只是将数字添加到2、3a、4a等

Answer 1

这是您需要的吗？

function showHiddenBlocks() {
  const hiddenBlocks = document.querySelectorAll('.block2.hidden');
  hiddenBlocks.forEach((block) => {
    block.classList.remove('hidden');
  });
}

function onClick(event) {
  document.querySelectorAll('.block2').forEach(block => {
    if (block.contains(event.target))
      block.classList.add("border")
    else
      block.classList.remove("border")
  })
}

.hidden {
  display: none;
}

.border {
  border: thick solid #000
}

<div class="block2" onclick="showHiddenBlocks()"><p>Main</p></div>

<div class="block2 hidden" onclick="onClick(event)" style="background-color:hotpink;"><p>Pink</p></div>
    <div class="block2 hidden" onclick="onClick(event)" style="background-color:orange;"><p>Orange</p></div>
    <div class="block2 hidden" onclick="onClick(event)" style="background-color:lightblue;"><p>Lightblue</p></div>
    <div class="block2 hidden" onclick="onClick(event)" style="background-color:green;"><p>Green</p></div>
    <div class="block2 hidden" onclick="onClick(event)" style="background-color:blue;"><p> Blue</p></div>