javascript - 显示隐藏的 div 并关闭其他的，因此一次显示 1

Question

我有一个要用下面的 html 显示的项目列表。每个项目都有一个隐藏的 div，其中包含有关该项目的更多详细信息。我已经做到了，所以如果我单击 onclick 链接，它会显示该特定项目的 div。我想知道的是，如果我使用 onclick 显示其他项目的详细信息，我将如何隐藏我刚刚打开的 div？另外，当单击相同的 onclick 时，我如何才能使其自身切换？我对 javascript 的了解有限，因此我们将不胜感激。谢谢!

HTML

<div>Item Name <a onclick="FullItemDetails(123)">Full Item Details</a></div>
<div>other stuff</div>
</div>
<div id="FullItemDetails_123" style="display: none;"></div>

和JavaScript

<script>
function FullItemDetails(item_id)  { 
document.getElementById("FullItemDetails_" + item_id).style.display = "block";
}
</script>

每个包含额外信息的 div 都有一个 FullItemDetails_ ID，后跟项目的唯一 ID。

Answer 1

你可以找到它当前的 css display 属性来像这样切换可见性

function FullItemDetails(item_id)  { 
  var currentItem = document.getElementById("FullItemDetails_" + item_id);

  if (currentItem.style.display === "block") {
    currentItem.style.display = "none";
  } else {
    currentItem.style.display = "block";
  }
}