javascript - 使用 JavaScript 隐藏网格项

Question

我有一个 2 x 2 的 CSS 网格。每个网格元素简要描述了一项服务(小型企业网站)，每个网格元素都有一个按钮来了解有关该服务的更多信息。当用户单击四个按钮之一以了解更多信息时，我希望该网格项展开以占据整个 2x2 网格(我正在工作)并让其他 3 个网格项消失(我遇到了麻烦).这是一个例子:https://jsfiddle.net/L7fatdmh/ ，请注意，目前只有第一个网格项应用了 JS。

firstButton = document.getElementById("firstButton");
firstButton.onclick = function() {
  squaresGrid = document.getElementsByClassName("grid-squares");
  g1 = document.getElementById("g1");
  console.log(g1)
  g1.style.gridColumn = "1/3";
  g1.style.gridRow = "1/3";
}

.grid-squares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 300px;
}

<div class="grid-squares">
  <div class="grid_item" id="g1">
    <h2>Service One</h2>
    <p>
      lorem impsum
    </p>
    <button id="firstButton">Learn More</button>
  </div>
  <div class="grid_item">
    <h2>Service Two</h2>
    <p>
      lorem impsum
    </p>
    <button>Learn More</button>
  </div>
  <div class="grid_item">
    <h2>Service Three</h2>
    <p>
      lorem impsum
    </p>
    <button>Learn More</button>
  </div>
  <div class="grid_item">
    <h2>Service Four</h2>
    <p>
      lorem impsum
    </p>
    <button>Learn More</button>
  </div>
</div>

正如您在 jsFiddle 示例中看到的那样，网格项确实会扩展以填充适当的空间，但所有其他网格项在下方仍然可见。我怎样才能隐藏这些？最初隐藏所有 grid-item 然后根据它的 id 显示特定元素(即第一个网格元素中的 g1 )最好选项？

Answer 1

您可以选择不是您的事件目标的元素并隐藏它们。

使用你的 fiddle ，如果我们添加

gOther = document.querySelectorAll(".grid_item:not(#g1)");

for (g of gOther) {
 g.style.display = "none";
}

它会起作用，但对于现实世界的场景，您需要使它更完整一些，并寻找不是您目标的元素。