问题描述
我有一段代码在单击父div时显示了一个div。 我希望能够再次单击父div时隐藏此子div。 我不知道这个。
我不知道它是否必须在单独的函数中？ 如何检查之前是否单击过它（也许显示了子div？在执行该操作时确实感到困惑）。
谢谢你的帮助，
document.getElementsByClassName('article-title')[i]
.addEventListener('click', function (event) {
articleDescription.style.display = "block";
}
我的代码很长，但单击时显示div效果很好。 因此，我没有发布整个代码。 我只需要一些帮助，看看我需要进入哪个方向才能使它在第二次单击后消失
1楼
Dmitry S.
1
2019-03-02 21:18:53
您需要添加一个条件来检查子元素是否具有样式display:block 。
这是一个切换功能。
var articleTitle = document.getElementsByClassName('article-title'); for(let i=0; i<articleTitle.length; i++){ articleTitle[i].addEventListener('click', function (event) { let target = event.target; let articleDescription = target.firstElementChild; articleDescription.style.display = (articleDescription.style.display == 'none') ? 'block' : 'none'; }); };
<div class="article-title">parent <div class="article-description">child</div> </div> <div class="article-title">parent <div class="article-description">child</div> </div>
2楼
Artur Leinweber
1
2019-03-02 21:23:00
如果在元素上添加类并通过CSS处理隐藏，则问题会变得更加容易。
jQuery示例：
$(".parent").click(function(){ $(".parent").toggleClass("clicked"); });
.child{ display: none; } .parent.clicked .child{ display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="parent"> parent <div class="child">child</div> </div>
3楼
Aniket G
1
2019-03-02 21:30:43
下面的代码段应该适合您。
基本上，它使用window.getComputedStyle(this.children[0]).getPropertyValue("display")来检查元素是否可见。
如果可见，则显示div。
如果不可见，则会隐藏div。
articleDescription = document.getElementsByClassName("article-description"); articleTitles = document.getElementsByClassName('article-title'); for (var i = 0; i < articleTitles.length; i++) { articleTitles[i] .addEventListener('click', function(event) { if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "none") { this.children[0].style.display = "block"; } else if (window.getComputedStyle(this.children[0]).getPropertyValue("display") == "block") { this.children[0].style.display = "none"; } }) }
.article-title { width: 300px; height: 50px; background-color: red; } .article-description { width: 300px; height: 50px; background-color: yellow; display: none; }
<div class="article-title"> <div class="article-description"></div> </div> <div class="article-title"> <div class="article-description"></div> </div> <div class="article-title"> <div class="article-description"></div> </div> <div class="article-title"> <div class="article-description"></div> </div> <div class="article-title"> <div class="article-description"></div> </div>