我正在尝试创建一个新闻通讯缩略图列表,该列表将通过其父标题的 onclick 事件显示和隐藏。该函数被正确调用以显示列表,但在第二次单击时不会再次隐藏它。我确信我错过了一些简单的事情,但我不知所措。
function showBabList() {
if (document.getElementById('bablist').style.display = "none") {
document.getElementById('bablist').style.display = "block";
} else {
document.getElementById('bablist').style.display = "none";
}
}
<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2>
<div id="bablist" style="display: none;">
<ul>
<a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a>
<a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a>
</ul>
</div>
最佳答案
function showBabList() {
if (document.getElementById('bablist').style.display == "none") {
document.getElementById('bablist').style.display = "block";
} else {
document.getElementById('bablist').style.display = "none";
}
}
<h2 onclick="showBabList()">BITSandBYTES Newsletters</h2>
<div id="bablist" style="display: none;">
<ul>
<a href="newsletter/BITSandBYTES2017-07.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-07_thumb.png" class="babthumb" height="100px" width="75px"></a>
<a href="newsletter/BITSandBYTES2017-08.pdf" target="bab"><img src="images/thumbs/BITSandBYTES2017-08_thumb.png" class="babthumb" height="100px" width="75px"></a>
</ul>
</div>
错误
if (document.getElementById('bablist').style.display = "none")
正确
if (document.getElementById('bablist').style.display == "none")
关于javascript - 使用父 onclick 事件显示和隐藏隐藏的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46203771/