Javascript 在打开新元素之前，使可单击元素关闭可见元素

请参阅下面的代码片段。我有多个可单击的div，单击这些div时，会显示下面的一些内容。每个可单击的div显示一组不同的内容。我的问题是，两个内容块可以同时打开。我只想一次显示一个内容块。因此，当单击时，如果已经有一个内容块打开，我希望它在打开新的内容块之前关闭。我怎样才能做到这一点

函数showOne（）{
var x=document.getElementById（“thing”）；
如果（x.style.display==“无”）{
x、 style.display=“flex”；
}否则{
x、 style.display=“无”；
}
}
函数showTwo（）{
var x=document.getElementById（“另一件事”）；
如果（x.style.display==“无”）{
x、 style.display=“flex”；
}否则{
x、 style.display=“无”；
}
}

正文{
显示器：flex；
弯曲方向：立柱；
填充：0px；
边际：0px；
}
div{
背景色：青色；
宽度：100%；
颜色：#ffffff；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.点击一{
光标：指针；
}
.点击二{
背景色：卡德蓝；
光标：指针；
}
事情
.还有一件事{
背景颜色：鲑鱼；
高度：200px；
利润率：25px；
宽度：自动；
显示：无；
}

单击我来显示一件事

单击我以显示其他内容

东西

另一件事

---

如果只有两个div有问题，你可以这样做。如果有多个ID，则可能会给它们提供类名和ID，然后在设置要显示的1个ID之前循环使用类名。

最简单的方法是进行如下切换：

函数showOne（）{
var x=document.getElementById（“thing”）；
var-other=document.getElementById（“另一件事”）；
如果（x.style.display==“无”）{
另一个.style.display=“无”
x、 style.display=“flex”；
}否则{
x、 style.display=“无”；
}
}
函数showTwo（）{
var x=document.getElementById（“另一件事”）；
var thing=document.getElementById（“thing”）；
如果（x.style.display==“无”）{
thing.style.display=“无”；
x、 style.display=“flex”；
}否则{
x、 style.display=“无”；
}
}

正文{
显示器：flex；
弯曲方向：立柱；
填充：0px；
边际：0px；
}
div{
背景色：青色；
宽度：100%；
颜色：#ffffff；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.点击一{
光标：指针；
}
.点击二{
背景色：卡德蓝；
光标：指针；
}
事情
.还有一件事{
背景颜色：鲑鱼；
高度：200px；
利润率：25px；
宽度：自动；
显示：无；
}

单击我来显示一件事

单击我以显示其他内容

东西

另一件事

如果您希望未选中的div也消失，您可能希望将

y.style.display=“none”

添加到每个函数的

else

语句中。您的第二个答案非常有效！但是，当您单击同一图元时，它不再打开或关闭。应该添加什么来恢复这一点？

function showOne() {
  var x = document.getElementById("thing");
  var y = document.getElementById("another-thing");
  if (x.style.display === "none") {
    x.style.display = "flex";
    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

function showTwo() {
  var x = document.getElementById("another-thing");
  var y = document.getElementById("thing");
  if (x.style.display === "none") {
    x.style.display = "flex";
    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}