提问人：Born2DoubleUp 提问时间：1/4/2020 最后编辑：Z KubotaBorn2DoubleUp 更新时间：1/4/2020 访问量：62
显示隐藏的 div 并关闭其他 div，以便一次显示 1 个
Display hidden div and closes others so 1 is displayed at a time
问：
我有一个用下面的 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。
答：
2赞
Zhephard
1/4/2020
#1
您可以找到其当前的 css 显示属性来切换可见性，如下所示
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";
}
}
评论
0赞
Zhephard
1/4/2020
谢谢@Born2DoubleUp如果合适，请随时将其标记为正确答案
1赞
Stefan Avramovic
1/4/2020
#2
您也可以使用事件侦听器来执行此操作，请参阅我的例子
var elements = document.getElementsByClassName('item')
for(var key in elements){
elements[key].querySelector('.button').addEventListener('click', function(e){
e.target.parentNode.querySelector('#description').style.display =
e.target.parentNode.querySelector('#description').style.display == 'none' ? 'block' : 'none'
})
}<div class="item">Item Name Full Item Details
<div >Other stuff</div>
<div id="description">Description</div>
<button class="button">Toggle</button>
</div>
<div class="item">Item Name Full Item Details
<div >Other stuff</div>
<div id="description">Description</div>
<button class="button">Toggle</button>
</div>
<div class="item">Item Name Full Item Details
<div >Other stuff</div>
<div id="description">Description</div>
<button class="button">Toggle</button>
</div>
上一个：按用户筛选数据库结果
评论