使用 JavaScript 隐藏网格项答案

【问题标题】：Hide grid items with JavaScript使用 JavaScript 隐藏网格项
【发布时间】：2019-05-31 11:32:51
【问题描述】：

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

html:

 <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>

css：

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

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";
}

正如您在 jsFiddle 示例中所见，网格项确实会扩展以填充适当的空间，但所有其他网格项在下方仍然可见。我该如何隐藏这些？最初隐藏所有grid-items，然后根据它的id（即第一个网格项目中的g1）显示特定项目是最佳选择吗？

【问题讨论】：

标签： javascript css css-grid

【解决方案1】：

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

使用你的小提琴，如果我们添加

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

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

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

【讨论】：